Alerts
An alert looks like...
<container> - has an alert and alert--$color class
<icon> - has an alert__icon class
<svg> - has an icon and icon--md class
<use xlink:href> - $icon-reference
<close> - has an alert__close alert--$color__close class
<svg> - has an icon and icon--md class
<use xlink:href> - $icon-reference
<text>
But all you need to do is copy the markup below, add some text and pick a color: warning, success, info
Example
Danger Will Robinson, DANGER!
You did it!
Leme tell you something...
Markup: components/alerts/alerts.html
<div class="alert alert--warning shake-it">
<span class="alert__icon">
<svg class="icon icon--md"><use xlink:href="#ei-eye"></use></svg>
</span>
<span class="alert__close alert__close--warning">
<svg class="icon icon--md" tabindex="0" role="button" aria-label="close">
<use xlink:href="#ei-close"></use>
</svg>
</span>
<span>Danger Will Robinson, DANGER!</span>
</div>
<div class="alert alert--success">
<span class="alert__icon">
<svg class="icon icon--md"><use xlink:href="#ei-like"></use></svg>
</span>
<span class="alert__close alert__close--success">
<svg class="icon icon--md" tabindex="0" role="button" aria-label="close">
<use xlink:href="#ei-close"></use>
</svg>
</span>
<span>You did it!</span>
</div>
<div class="alert alert--info">
<span class="alert__icon">
<svg class="icon icon--md"><use xlink:href="#ei-exclamation"></use></svg>
</span>
<span class="alert__close alert__close--info">
<svg class="icon icon--md" tabindex="0" role="button" aria-label="close">
<use xlink:href="#ei-close"></use>
</svg>
</span>
<span>Leme tell you something...</span>
</div>
Source:
components/alerts/_alerts.scss, line 1