o-message

Product messaging component used for alerting and informing

active

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 Bleed: Success

Alert message for a positive response to an action, styled to bleed to the edge of a page

<div class="o-message o-message--alert-bleed 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>
	</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-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>
					<span class="o-message__content-detail">The quick brown fox jumped over the lazy dogs!</span>
				</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 Bleed: Neutral

Alert message for an informative response to an action, styled to bleed to the edge of a page

<div class="o-message o-message--alert-bleed 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>
	</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-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">There&apos;s a fox, and some 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 Bleed: Error

Alert message for a negative response to an action, styled to bleed to the edge of a page

<div class="o-message o-message--alert-bleed 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>
	</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-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>
					<span class="o-message__content-detail">The quick brown fox did not jump over the lazy dogs.</span>
				</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 Bleed: Inform

Notice message to convey information, styled to bleed to the edge of a page

<div class="o-message o-message--notice-bleed 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-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. 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>
Bower Dependencies
o-colors ^4.1.5
o-typography ^5.5.0
o-buttons ^5.11.1
o-icons ^5.6.0
o-brand >=2.2.0 <4
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-message@^2.3.5

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-message"@"^2.3.5"

For more information see the Origami build process.