@kabbage/sprout 0.25.2

Alert Component

A CSS implementation of the Sprout alert component.

Related

Sprout Alert documentation [external]

Example

html 
<div class="spr-alert spr-alert-info">
    <div class="spr-alert-status">
        <i class="spr-icon spr-icon-info-fill"></i>
    </div>
    <div class="spr-alert-center-content">
        <div class="spr-alert-title">Type your notification text here...</div>
        <div class="spr-alert-subtext">This is the subtext to the alert...</div>
        <div class="spr-alert-action">Action Label</div>
    </div>
    <div class="spr-alert-right-content">
        <span>
            <i class="spr-icon spr-icon-close"></i>
        </span>
    </div>
</div>

<div class="spr-alert spr-alert-warning" style="margin-top: 10px;">
    <div class="spr-alert-status">
        <i class="spr-icon spr-icon-indeterminate-fill"></i>
    </div>
    <div class="spr-alert-center-content">
        <div class="spr-alert-title">Type your notification text here...</div>
        <div class="spr-alert-subtext">This is the subtext to the alert...</div>
        <div class="spr-alert-action">Action Label</div>
    </div>
    <div class="spr-alert-right-content">
        <span>
            <i class="spr-icon spr-icon-close"></i>
        </span>
    </div>
</div>

<div class="spr-alert spr-alert-error" style="margin-top: 10px;">
    <div class="spr-alert-status">
        <i class="spr-icon spr-icon-alert-fill"></i>
    </div>
    <div class="spr-alert-center-content">
        <div class="spr-alert-title">Type your notification text here...</div>
        <div class="spr-alert-subtext">This is the subtext to the alert...</div>
        <div class="spr-alert-action">Action Label</div>
    </div>
    <div class="spr-alert-right-content">
        <span>
            <i class="spr-icon spr-icon-close"></i>
        </span>
    </div>
</div>

<div class="spr-alert spr-alert-success" style="margin-top: 10px;">
    <div class="spr-alert-status">
        <i class="spr-icon spr-icon-check-fill"></i>
    </div>
    <div class="spr-alert-center-content">
        <div class="spr-alert-title">Type your notification text here...</div>
        <div class="spr-alert-subtext">This is the subtext to the alert...</div>
        <div class="spr-alert-action">Action Label</div>
    </div>
    <div class="spr-alert-right-content">
        <span>
            <i class="spr-icon spr-icon-close"></i>
        </span>
    </div>
</div>

Compiled CSS

Example

scss 
@import 'components/alert';