Alerts

The alert component is a small complete navigation component.

Contextual

      
<p>The <code>.hx-alert</code> component comes in 4 variations, success, info, warning and error. They can have icons assigned which can be changed and represent different actions.</p>

<div class="hx-alert">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert
  </span>
</div>
<div class="hx-alert is-info">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert
  </span>
</div>
<div class="hx-alert is-success">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-check"></i>
  </span>
  <span class="hx-flex-1">
    This is a success alert
  </span>
</div>
<div class="hx-alert is-warning">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a warning alert
  </span>
</div>
<div class="hx-alert is-danger">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a danger alert
  </span>
</div>

The .hx-alert component comes in 4 variations, success, info, warning and error. They can have icons assigned which can be changed and represent different actions.

This is the default alert

This is a success alert

This is a warning alert

This is a danger alert

Closable

      
<p>A close button can be added.</p>

<div class="hx-alert">
  <span class="hx-icon-control mr-2"><i class="hx-icon is-medium icon-information"></i></span>
  <span class="hx-flex-1">This is the default alert</span>
  <span class="hx-icon-control ml-2">
    <button class="hx-delete"></button>
  </span>
</div>

A close button can be added.

This is the default alert

Custom icon / No icon

      
<p>You can easily assign a custom icon or remove it all together.</p>

<div class="hx-alert is-success">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-credit-card"></i>
  </span>
  <span class="hx-flex-1">
    This is a success alert with a custom icon.
  </span>
</div>
<div class="hx-alert">
  <span class="hx-flex-1">
    This is an error alert with no icon.
  </span>
</div>

You can easily assign a custom icon or remove it all together.

This is a success alert with a custom icon.

This is an error alert with no icon.

Modifiers

      
<h5>Inverted</h5>
<p>Invert the alert style by using the <code>.is-inverse</code> modifier. </p>
<div class="hx-alert is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert. <a href="">Click here</a> to URL.
  </span>
  <span class="hx-icon-control ml-2">
    <button class="hx-delete"></button>
  </span>
</div>
<div class="hx-alert is-info is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert. <a href="">Click here</a> to URL.
  </span>
  <span class="hx-icon-control ml-2">
    <button class="hx-delete"></button>
  </span>
</div>
<div class="hx-alert is-success is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-check"></i>
  </span>
  <span class="hx-flex-1">
    This is a success alert. <a href="">Click here</a> to URL.
  </span>
  <span class="hx-icon-control ml-2">
    <button class="hx-delete"></button>
  </span>
</div>
<div class="hx-alert is-warning is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a warning alert. <a href="">Click here</a> to URL.
  </span>
  <span class="hx-icon-control ml-2">
    <button class="hx-delete"></button>
  </span>
</div>
<div class="hx-alert is-danger is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a danger alert. <a href="">Click here</a> to URL.
  </span>
  <span class="hx-icon-control ml-2">
    <button class="hx-delete"></button>
  </span>
</div>

<p>&nbsp;</p>
<h5>Bordered</h5>
<p>Inverted styles are predominantly designed to work on white backgrounds. <br>
In some cases they will go on other background colours that make the inverted style hard to see. <br>
Use the  <code>.is-bordered</code> modifier to make it stand out. </p>

<div class="hx-alert is-inverse is-bordered">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-info is-inverse is-bordered">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-success is-inverse is-bordered">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-check"></i>
  </span>
  <span class="hx-flex-1">
    This is a success alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-warning is-inverse is-bordered">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a warning alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-danger is-inverse is-bordered">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a danger alert. <a href="">Click here</a> to URL.
  </span>
</div>

<p>&nbsp;</p>
<h5>Sizes</h5>
<p>Add the  <code>.is-small</code> modifier to reduce padding and overall size of alerts. </p>

<div class="hx-alert is-inverse is-bordered is-small">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-info is-inverse is-bordered is-small">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    This is the default alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-success is-inverse is-bordered is-small">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-check"></i>
  </span>
  <span class="hx-flex-1">
    This is a success alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-warning is-inverse is-bordered is-small">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a warning alert. <a href="">Click here</a> to URL.
  </span>
</div>
<div class="hx-alert is-danger is-inverse is-bordered is-small">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-exclamation"></i>
  </span>
  <span class="hx-flex-1">
    This is a danger alert. <a href="">Click here</a> to URL.
  </span>
</div>

Inverted

Invert the alert style by using the .is-inverse modifier.

This is the default alert. Click here to URL.

This is a success alert. Click here to URL.

This is a warning alert. Click here to URL.

This is a danger alert. Click here to URL.

Bordered

Inverted styles are predominantly designed to work on white backgrounds.
In some cases they will go on other background colours that make the inverted style hard to see.
Use the .is-bordered modifier to make it stand out.

This is the default alert. Click here to URL.

This is a success alert. Click here to URL.

This is a warning alert. Click here to URL.

This is a danger alert. Click here to URL.

Sizes

Add the .is-small modifier to reduce padding and overall size of alerts.

This is the default alert. Click here to URL.

This is a success alert. Click here to URL.

This is a warning alert. Click here to URL.

This is a danger alert. Click here to URL.