This version of this component hasn't been branded yet.

Please check the latest version, 2.4.0, as branding is a relatively new addition to our components.

o-message

Component description

active

Alert Message

Alert messages (success, error and neutral)

<div class="demo-message">
	<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__highlight">Something went wrong!<span class="o-message__detail">The quick brown fox did not jump over the lazy dogs.</span></p>
				<div class="o-message__actions">
					<a href="#" class="o-message__action--primary">Button</a>
					<a href="#" class="o-message__action--secondary">Text link</a>
				</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__highlight">Meh.<span class="o-message__detail">There&apos;s a fox, and some lazy dogs</span>.</p>
				<div class="o-message__actions">
					<a href="#" class="o-message__action--primary">Button</a>
					<a href="#" class="o-message__action--secondary">Text link</a>
				</div>
			</div>
		</div>
	</div>

	<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__highlight">Hooray!<span class="o-message__detail">The quick brown fox jumped over the lazy dogs!</span></p>
				<div class="o-message__actions">
					<a href="#" class="o-message__action--primary">Button</a>
					<a href="#" class="o-message__action--secondary">Text link</a>
				</div>
			</div>
		</div>
	</div>

	<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__highlight">Hooray!<span class="o-message__detail">The quick brown fox jumped over the lazy dogs!</span></p>
			<div class="o-message__actions">
				<a href="#" class="o-message__action--primary">Button</a>
				<a href="#" class="o-message__action--secondary">Text link</a>
			</div>
		</div>
		</div>
	</div>
</div>

Inner Message

Inner alert messages (success, error and neutral)

<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__highlight">Hooray!<span class="o-message__detail">The quick brown fox jumped over the lazy dogs!</span></p>
				<p class="o-message__additional-info">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__action--primary">Button</a>
					<a href="#" class="o-message__action--secondary">Text link</a>
				</div>
			</div>
		</div>
	</div>
</div>

<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__highlight">Meh.<span class="o-message__detail">There&apos;s a fox, and some lazy dogs</span></p>

				<div class="o-message__actions">
					<a href="#" class="o-message__action--primary">Button</a>
					<a href="#" class="o-message__action--secondary">Text link</a>
				</div>
			</div>
		</div>
	</div>
</div>

<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__highlight">Oops.<span class="o-message__detail">The quick brown fox did not jump over the lazy dogs.</span></p>
				<p class="o-message__additional-info">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__action--primary">Button</a>
					<a href="#" class="o-message__action--secondary">Text link</a>
				</div>
			</div>
		</div>
	</div>
</div>

Imperative

Imperative alert messages regular, inner and bleed)

<h6>Simple alert messages</h6>
<div class="list-of-demo-buttons">
	<button class="demo-button" id="alert-success">Alert Success</button>
	<button class="demo-button" id="alert-neutral">Alert Information</button>
	<button class="demo-button" id="alert-error">Alert Error</button>
	<button class="demo-button" id="alert-error-bleed">Alert Error (bleed)</button>
</div>

<h6>Inline alert messages</h6>
<div class="list-of-demo-buttons">
	<button class="demo-button" id="inner-success">Alert Success Inline</button>
	<button class="demo-button" id="inner-neutral">Alert Information Inline</button>
	<button class="demo-button" id="inner-error">Alert Error Inline</button>
</div>

<div class="demo-inner" data-o-component="o-message"></div>
Bower Dependencies
o-colors ^4.1.5
o-typography ^5.5.0
o-buttons ^5.8.5
o-icons ^5.6.0
GitHub Repository

Quickstart

Build Service

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

o-message@^1.0.6

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"@"^1.0.6"

For more information see the Origami build process.