Version 3.0.6

Alerts

Alerts keep users informed of important changes and provide feedback on user actions. For proper styling, use one of the contextual classes (e.g., .success, .error). For inline dismissal, use the alerts jQuery plugin.

Info alerts are used to inform users.

A new feature is available: Contact Look Up. Finding a contact is now always within reach.  Learn moreDismiss Alert
                      
<div class="alert info">
<span>A new feature is available: Contact Look Up. Finding a contact is now always within reach.
<a href="">Learn more</a></span>
<a class="dismiss" data-dismiss="alert">
<span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
<span class="reader-only">Dismiss Alert</span>
</a>
</div>

Success alerts are used after an action has been successfully preformed.

                      
<div class="alert success">
<span>"<a href="">Contribution #267162</a>" was saved.</span>
<a class="dismiss" data-dismiss="alert">
<span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
<span class="reader-only">Dismiss Alert</span>
</a>
</div>

Warning alerts caution a user about an action they are about to take.

Deleting this target will remove it as a recipient from all other forms.Dismiss Alert
                      
<div class="alert warn">
<span>Deleting this target will remove it as a recipient from all other forms.</span>
<a class="dismiss" data-dismiss="alert">
<span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
<span class="reader-only">Dismiss Alert</span>
</a>
</div>

Error alerts inform a user of an error that must be resolved before they can continue.

Select at least one target.Dismiss Alert
                      
<div class="alert error">
<span>Select at least one target.</span>
<a class="dismiss" data-dismiss="alert">
<span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
<span class="reader-only">Dismiss Alert</span>
</a>
</div>

System alerts inform a user of an important system-wide message. Examples include billing errors or upcoming maintenance. They are placed at the very top of the page above all content and are full-width. You can see an example on the List Page Template.

Warning! Your account is overdue and will be locked on 4/1/2017. Update Billing InfoDismiss Alert
                      
<div class="alert system-alert">
<span><strong>Warning! </strong>Your account is overdue and will be locked on 4/1/2017. <a href="">Update Billing Info</a></span>
<a class="dismiss" data-dismiss="alert">
<span class="glyphicons glyphicons-remove" aria-hidden="true"></span>
<span class="reader-only">Dismiss Alert</span>
</a>
</div>

Search Results

Powered by