Components
Alerts
Under review
The alert component is to make the user aware of information in a way that is not obtrusive to the current page.
Portal usage
Example
Alerts
<div class="alert">
<div class="alert__item">
<div class="element--inner">
<h4 class="heading alert__heading">Alerts</h4>
<div class="alert__message alert--state-danger">
<p>The title of the alert to go here, this should be short</p>
<a data-toggle="modal" href="#alert-modal-1" data-target="#alert-modal-1" class="alert__link" aria-label="Read more about this alert" >Read more </a>
</div>
<div class="modal fade" id="alert-modal-1" tabindex="-1" role="dialog" aria-labelledby="Model title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Alert <button type="button" class="modal--close pull-right" data-dismiss="modal" aria-label="Close modal">x</button></h4>
</div>
<div class="modal-body">
<div class="alert__message alert--state-danger">
<p>The full body of the alert should be in here</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="modal--close" data-dismiss="modal" aria-label="Close modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When to use this
You should use this component when:
- you need to make the user aware of information pertaining to the current page a user is on
- you need to make the user aware of information that may alter their decision to carry through with a service
When not to use this
Do not use this component as a means of visualizing a particular piece of content that should be part of the main content.