Origami Frontend Components & Services

Demos: o-message

Alert: Success

Alert message for a positive response to an action

<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>

Alert Inner: Success

Alert message for a positive response to an action, styled to fit within another container

<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>

Alert: Neutral

Alert message for an informative response to an action

<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>

Alert Inner: Neutral

Alert message for an informative response to an action, styled to fit within another container

<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>

Alert: Error

Alert message for a negative response to an action

<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>

Alert Inner: Error

Alert message for a negative response to an action, styled to fit within another container

<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>

Notice: Inform

Notice message to convey information

<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>

Notice Inner: Inform

Notice message to convey information, styled to fit within another container

<div class="demo-inner-message">
  <div
    class="o-message o-message--notice o-message--inner o-message--inform"
    data-o-component="o-message"
    data-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>

Alert: Custom

Sass users may customise alert messages. See the README for more information.

Notice: Custom

Sass users may customise notice messages. See the README for more information.

Status
active Origami v1
Switch component view

GitHub Repository

Install o-message

If using the Build Service, add o-message@^4.1.8 to your script and link tags.

If running a Manual Build, run npm install "o-message@^4.1.8".

Help & Support

o-message is maintained directly by the Origami team. If you have any questions about o-message or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com