{{#freestyle-usage "alert-standard" title="Alert"}}
  <div class="notification is-info">
    <h3 class="title is-4">This is an alert</h3>
    <p>Alerts are used for both situational and reactionary information.</p>
  </div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
  <p>Alerts use Bulma's notification component.</p>
{{/freestyle-annotation}}

{{#freestyle-usage "alert-colors" title="Alert colors"}}
  <div class="notification is-info">
    <h3 class="title is-4">This is an alert</h3>
    <p>Alerts are used for both situational and reactionary information.</p>
  </div>

  <div class="notification is-success">
    <h3 class="title is-4">This is an alert</h3>
    <p>Alerts are used for both situational and reactionary information.</p>
  </div>

  <div class="notification is-warning">
    <h3 class="title is-4">This is an alert</h3>
    <p>Alerts are used for both situational and reactionary information.</p>
  </div>

  <div class="notification is-danger">
    <h3 class="title is-4">This is an alert</h3>
    <p>Alerts are used for both situational and reactionary information.</p>
  </div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
  <p>Alerts are always paired with an emotive color. If there is no emotive association with the content of the alert, then an alert is the wrong component to use.</p>
{{/freestyle-annotation}}

{{#freestyle-usage "alert-dismissal" title="Alert dismissal"}}
  <div class="notification is-info">
    <div class="columns">
      <div class="column">
        <h3 class="title is-4">This is an alert</h3>
        <p>Alerts are used for both situational and reactionary information.</p>
      </div>
      <div class="column is-centered is-minimum">
        <button class="button is-info">Okay</button>
      </div>
    </div>
  </div>

  <div class="notification is-success">
    <div class="columns">
      <div class="column">
        <h3 class="title is-4">This is an alert</h3>
        <p>Alerts are used for both situational and reactionary information.</p>
      </div>
      <div class="column is-centered is-minimum">
        <button class="button is-success">Okay</button>
      </div>
    </div>
  </div>

  <div class="notification is-warning">
    <div class="columns">
      <div class="column">
        <h3 class="title is-4">This is an alert</h3>
        <p>Alerts are used for both situational and reactionary information.</p>
      </div>
      <div class="column is-centered is-minimum">
        <button class="button is-warning">Okay</button>
      </div>
    </div>
  </div>

  <div class="notification is-danger">
    <div class="columns">
      <div class="column">
        <h3 class="title is-4">This is an alert</h3>
        <p>Alerts are used for both situational and reactionary information.</p>
      </div>
      <div class="column is-centered is-minimum">
        <button class="button is-danger">Okay</button>
      </div>
    </div>
  </div>
{{/freestyle-usage}}