#sg-callouts.showcase.shadow-1
  header.showcase-header
    h2 Callouts
    p.
      Please use callouts sparingly throughout the docs.
      Callouts (like alerts) are meant to draw attention on important occasions.
      Unlike alerts, callouts are designed to display multi-line content.

  .showcase-content
    .l-sub-section
      h3 Adding a Callout

      .callout.is-critical
        header A Critical Title
        p.
          Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
      .callout.is-important
        header A Very Important Title
        p.
          A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
      .callout.is-helpful
        header A Very Helpful Title
        p.
          Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix

      pre.prettyprint.linenums.lang-html
        code.
          .callout.is-critical
            header A Critical Title
            p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix

          .callout.is-important
            header A Very Important Title
            p A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix

          .callout.is-helpful
            header A Very Helpful Title
            p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix