Global alerts let the user know that something happened. They're perfect for messages that don't need to interrupt the user's workflow (modals are used to block). For examples, you may need to inform the user about a configuration change, that they've gone offline, there was an error, or of a software update.
<div class="ui-alert [modifier class]">
<p>
<strong>This is the title of the alert</strong> This is the content of the alert. You can include a <a href="#">link.</a>
</p>
<div class="ui-alert__actions">
<a>Cancel</a>
<button class="ui-button small">Okay</button>
</div>
</div>What is it for?
<div class="ui-alert-box [modifier class]">
<span class="icon-exclamation-1"></span>
<strong>This is the title of the alert</strong> This is the content of the alert. You can include a <a href="#">link.</a>
<div class="ui-alert__actions">
<button class="ui-button small">Okay</button>
</div>
</div>
<div class="ui-alert-box [modifier class]">
<span class="icon-exclamation-1"></span>
<strong>This is the title of the alert</strong> This is the content of the alert. You can include a <a href="#">link.</a>
<a class="ui-alert-box__close"></a>
</div>Flashes are notifications that appear on the screen, to notify the user of some kind of change, such as a change in state, the result of an action, etc.
In pellentesque faucibus vestibulum. With a link Nulla at nulla justo, eget luctus tortor.
In pellentesque faucibus vestibulum. With a link Nulla at nulla justo, eget luctus tortor.
In pellentesque faucibus vestibulum. With a link Nulla at nulla justo, eget luctus tortor.
<div class="ui-flash [modifier class]">
<span class="ui-flash__close"></span>
<span class="ui-flash__icon icon-exclamation-1"></span>
<div class="ui-flash__body">
<h4>This is a flash</h4>
<p>In pellentesque faucibus vestibulum. <a href="#">With a link</a> Nulla at nulla justo, eget luctus tortor.</p>
</div>
</div>In pellentesque faucibus vestibulum. With a link Nulla at nulla justo, eget luctus tortor.
In pellentesque faucibus vestibulum. With a link Nulla at nulla justo, eget luctus tortor.
In pellentesque faucibus vestibulum. With a link Nulla at nulla justo, eget luctus tortor.
<div class="ui-flash [modifier class]">
<span class="ui-flash__icon icon-confirm-1"></span>
<span class="ui-flash__close"></span>
<div class="ui-flash__body">
<h4>This is a flash</h4>
<p>In pellentesque faucibus vestibulum. <a href="#">With a link</a> Nulla at nulla justo, eget luctus tortor.</p>
<button class="ui-button small">Do it!</button>
</div>
</div><div class="ui-progress">
<div class="ui-progress__fill" style="width: 50%"></div>
</div>
<div class="ui-progress is-processing">
<div class="ui-progress__fill"></div>
</div>