#sg-alerts.showcase.shadow-1
  header.showcase-header
    h2 Alerts
    p.
      Please use alerts sparingly throughout the docs.
      They are meant to draw attention on important occasions.
      Alerts should not be used for multi-line content (user callouts insteads) or stacked
      on top of each other.

  .showcase-content
    .l-sub-section
      h3 Adding an alert

      .alert.is-critical A very <strong>critical</strong> alert
      .alert.is-important A very <strong>important</strong> alert
      .alert.is-helpful A very <strong>helpful</strong> alert

      pre.prettyprint.linenums
        code.
          .alert.is-critical A very <strong>critical</strong> alert
          .alert.is-important A very <strong>important</strong> alert
          .alert.is-helpful A very <strong>helpful</strong> alert