Demos: o-message

<div
  class="o-message o-message--alert o-message--success"
  data-o-component="o-message"
>
  <div class="o-message__container">
    <div class="o-message__content">
      <p class="o-message__content-main">
        <span class="o-message__content-highlight"> Hooray! </span>
        The quick brown fox jumped over the lazy dogs!
      </p>

      <div class="o-message__actions">
        <a href="#" class="o-message__actions__primary">Button</a>
        <a href="#" class="o-message__actions__secondary">Text link</a>
      </div>
    </div>
  </div>
</div>

<div class="demo-inner-message">
  <div
    class="o-message o-message--alert o-message--inner o-message--success"
    data-o-component="o-message"
  >
    <div class="o-message__container">
      <div class="o-message__content">
        <p class="o-message__content-main">
          <span class="o-message__content-highlight"> Hooray! </span>
          The quick brown fox jumped over the lazy dogs!
        </p>
        <p class="o-message__content-additional">
          Did you know that that sentence uses all of the letters in the
          alphabet at least once?
        </p>

        <div class="o-message__actions">
          <a href="#" class="o-message__actions__primary">Button</a>
          <a href="#" class="o-message__actions__secondary">Text link</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-message o-message--alert o-message--neutral"
  data-o-component="o-message"
>
  <div class="o-message__container">
    <div class="o-message__content">
      <p class="o-message__content-main">
        There&apos;s a fox, and some lazy dogs. Many lazy dogs. Many, many, many
        lazy dogs. Only one fox. Many, many, many lazy dogs.
      </p>

      <div class="o-message__actions">
        <a href="#" class="o-message__actions__primary">Button</a>
        <a href="#" class="o-message__actions__secondary">Text link</a>
      </div>
    </div>
  </div>
</div>

<div class="demo-inner-message">
  <div
    class="o-message o-message--alert o-message--inner o-message--neutral"
    data-o-component="o-message"
  >
    <div class="o-message__container">
      <div class="o-message__content">
        <p class="o-message__content-main">
          <span class="o-message__content-highlight"> Meh. </span>
          <span class="o-message__content-detail"
            >The quick brown fox did not jump over the lazy dogs.</span
          >
        </p>

        <div class="o-message__actions">
          <a href="#" class="o-message__actions__primary">Button</a>
          <a href="#" class="o-message__actions__secondary">Text link</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-message o-message--alert o-message--error"
  data-o-component="o-message"
>
  <div class="o-message__container">
    <div class="o-message__content">
      <p class="o-message__content-main">
        The quick brown fox did
        <span class="o-message__content-highlight">not</span> jump over the lazy
        dogs.
      </p>

      <div class="o-message__actions">
        <a href="#" class="o-message__actions__primary">Button</a>
        <a href="#" class="o-message__actions__secondary">Text link</a>
      </div>
    </div>
  </div>
</div>

<div class="demo-inner-message">
  <div
    class="o-message o-message--alert o-message--inner o-message--error"
    data-o-component="o-message"
  >
    <div class="o-message__container">
      <div class="o-message__content">
        <p class="o-message__content-main">
          <span class="o-message__content-highlight"> Oops. </span>
          The quick brown fox did
          <span class="o-message__content-highlight">not</span> jump over the
          lazy dogs.
        </p>
        <p class="o-message__content-additional">
          But that sentence still uses all of the letters in the alphabet at
          least once!
        </p>

        <div class="o-message__actions">
          <a href="#" class="o-message__actions__primary">Button</a>
          <a href="#" class="o-message__actions__secondary">Text link</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-message o-message--notice o-message--inform"
  data-o-component="o-message"
>
  <div class="o-message__container">
    <div class="o-message__content">
      <p class="o-message__content-main">
        There are lazy dogs, maybe in a field, maybe not. It&apos;s important
        that you are informed of this fact.
      </p>

      <div class="o-message__actions">
        <a href="#" class="o-message__actions__primary">Button</a>
        <a href="#" class="o-message__actions__secondary">Text link</a>
      </div>
    </div>
  </div>
</div>

<div class="demo-inner-message">
  <div
    class="o-message o-message--notice o-message--inner o-message--inform"
    data-o-component="o-message"
    data-o-message-close="false"
  >
    <div class="o-message__container">
      <div class="o-message__content">
        <p class="o-message__content-main">
          There are lazy dogs, maybe in a field, maybe not. It&apos;s important
          that you are informed of this fact.
        </p>

        <div class="o-message__actions">
          <a href="#" class="o-message__actions__primary">Button</a>
          <a href="#" class="o-message__actions__secondary">Text link</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-message o-message--notice o-message--feedback"
  data-o-component="o-message"
>
  <div class="o-message__container">
    <div class="o-message__content">
      <p class="o-message__content-main">
        There are lazy dogs, maybe in a field, maybe not. It&apos;s important
        that you are informed of this fact.
      </p>

      <div class="o-message__actions">
        <a href="#" class="o-message__actions__primary">Button</a>
      </div>
    </div>
  </div>
</div>

<div class="demo-inner-message">
  <div
    class="o-message o-message--notice o-message--inner o-message--feedback"
    data-o-component="o-message"
  >
    <div class="o-message__container">
      <div class="o-message__content">
        <p class="o-message__content-main">
          There are lazy dogs, maybe in a field, maybe not. It&apos;s important
          that you are informed of this fact. There may also be a fox. This is
          unconfirmed.
        </p>

        <div class="o-message__actions">
          <a href="#" class="o-message__actions__primary">Button</a>
        </div>
      </div>
    </div>
  </div>
</div>