Alerts

Alert component for feedback.

This is super informative

You can tell by how pretty the alert is

This is super informative

You can tell by how pretty the alert is

This is super informative

You can tell by how pretty the alert is

This is super informative

You can tell by how pretty the alert is

This is super informative

You can tell by how pretty the alert is

Basic

<div class="SnAlert">
    <span class="SnIcon-question SnAlert-icon"></span>
    <div class="SnAlert-content">
        <strong>This is super informative</strong>
        <div>You can tell by how pretty the alert is</div>
    </div>
</div>
<div class="SnAlert success">
    <span class="SnIcon-success SnAlert-icon"></span>
    <div class="SnAlert-content">
        <strong>This is super informative</strong>
        <div>You can tell by how pretty the alert is</div>
    </div>
</div>
<div class="SnAlert info">
    <span class="SnIcon-info SnAlert-icon"></span>
    <div class="SnAlert-content">
        <strong>This is super informative</strong>
        <div>You can tell by how pretty the alert is</div>
    </div>
</div>
<div class="SnAlert warning">
    <span class="SnIcon-warning SnAlert-icon"></span>
    <div class="SnAlert-content">
        <strong>This is super informative</strong>
        <div>You can tell by how pretty the alert is</div>
    </div>
</div>
<div class="SnAlert danger">
    <span class="SnIcon-danger SnAlert-icon"></span>
    <div class="SnAlert-content">
        <strong>This is super informative</strong>
        <div>You can tell by how pretty the alert is.</div>
    </div>
</div>

message in alert

Close icon

<div class="SnAlert">
    <span class="SnIcon-question SnAlert-icon"></span>
    <div class="SnAlert-content">message in alert</div>
    <div class="SnAlert-close">
        <i class="SnIcon-close"></i>
    </div>
</div>

<div class="SnAlert success">
    <span class="SnIcon-success SnAlert-icon"></span>
    <div class="SnAlert-content">message in alert</div>
    <div class="SnAlert-close">
        <i class="SnIcon-close"></i>
    </div>
</div>

<div class="SnAlert info">
    <span class="SnIcon-info SnAlert-icon"></span>
    <div class="SnAlert-content">message in alert</div>
    <div class="SnAlert-close">
        <i class="SnIcon-close"></i>
    </div>
</div>

<div class="SnAlert warning">
    <span class="SnIcon-warning SnAlert-icon"></span>
    <div class="SnAlert-content">message in alert</div>
    <div class="SnAlert-close">
        <i class="SnIcon-close"></i>
    </div>
</div>

<div class="SnAlert danger">
    <span class="SnIcon-danger SnAlert-icon"></span>
    <div class="SnAlert-content">message in alert</div>
    <div class="SnAlert-close">
        <i class="SnIcon-close"></i>
    </div>
</div>

API

Property	Class
Alert	`.SnAlert`
Color	`.success.info.warning.danger`