Development
Components

Alert

Displays important alert messages
With close button:
Primary Text
Primary Text
Primary Text
Primary Text
Primary Text
Primary Text
Example:
    
<div class="ui-alert ui-alert--primary"><span class="alert-title">Primary Text</span><span class="button-close"></span></div>
<div class="ui-alert ui-alert--success"><span class="alert-title">Primary Text</span><span class="button-close"></span></div>
<div class="ui-alert ui-alert--danger"><span class="alert-title">Primary Text</span><span class="button-close"></span></div>
<div class="ui-alert ui-alert--warning"><span class="alert-title">Primary Text</span><span class="button-close"></span></div>
<div class="ui-alert ui-alert--light"><span class="alert-title">Primary Text</span><span class="button-close"></span></div>
<div class="ui-alert ui-alert--purple"><span class="alert-title">Primary Text</span><span class="button-close"></span></div>
Simple:
Primary Text
Primary Text
Primary Text
Primary Text
Primary Text
Primary Text
Example:
    
<div class="ui-alert ui-alert--primary"><span class="alert-title">Primary Text</span></div>
<div class="ui-alert ui-alert--success"><span class="alert-title">Primary Text</span></div>
<div class="ui-alert ui-alert--danger"><span class="alert-title">Primary Text</span></div>
<div class="ui-alert ui-alert--warning"><span class="alert-title">Primary Text</span></div>
<div class="ui-alert ui-alert--light"><span class="alert-title">Primary Text</span></div>
<div class="ui-alert ui-alert--purple"><span class="alert-title">Primary Text</span></div>