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

Notice: Feedback

Notice message to emit a strong feedback

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

Notice Inner: Feedback

Notice message to request feedback

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

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
Switch component view

GitHub Repository

Install o-message

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-message@^5.0.0".

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