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>

Notice: Warning Light

Notice message to emit a light warning

<div class="o-message o-message--notice  o-message--warning-light" 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>
		</div>
	</div>

Notice Inner: Warning Light

Notice message to emit a light warning, styled to fit within another container

<div class="demo-inner-message">
	<div class="o-message o-message--notice o-message--inner o-message--warning-light" 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. There may also be a fox. This is unconfirmed.
				</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: Warning

Notice message to emit a strong warning

<div class="o-message o-message--notice  o-message--warning" 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>
		</div>
	</div>

Notice Inner: Warning

Notice message to emit a strong warning, styled to fit within another container

<div class="demo-inner-message">
	<div class="o-message o-message--notice o-message--inner o-message--warning" 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>
		</div>
	</div>
</div>

Action: Inform Inverse

Action message, displaying a call to action

<div class="o-message o-message--action  o-message--inform-inverse" data-o-component="o-message" data-close="false">
		<div class="o-message__container">
			<div class="o-message__content o-message__content--center-align">
				<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>
						
					</div>
			</div>
		</div>
	</div>
Switch component view

GitHub Repository

Install o-message

If using the Build Service, add o-message@^3.1.4 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-message@^3.1.4".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com