Alert Inner Message

<h6class="center">Alert Messages</h6><divclass="demo-inner-message"><divclass="o-message o-message--alert-inner o-message--success"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="o-message__content-main"><spanclass="o-message__content-highlight">Hooray!</span><spanclass="o-message__content-detail">The quick brown fox jumped over the lazy dogs!</span></p><pclass="o-message__content--additional">Did you know that that sentence uses all of the letters in the alphabet at least once?</p><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div></div><divclass="demo-inner-message"><divclass="o-message o-message--alert-inner o-message--neutral"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="o-message__content-main"><spanclass="o-message__content-highlight">Meh.</span><spanclass="o-message__content-detail">There&apos;s a fox, and some lazy dogs</span></p><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div></div><divclass="demo-inner-message"><divclass="o-message o-message--alert-inner o-message--error"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="o-message__content-main"><spanclass="o-message__content-highlight">Oops.</span><spanclass="o-message__content-detail">The quick brown fox did not jump over the lazy dogs.</span></p><pclass="o-message__content-additional">But that sentence still uses all of the letters in the alphabet at least once!</p><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div></div>

Notice Message

<h6>Notice Messages</h6><divclass="o-message o-message--notice o-message--inform"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="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><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div><divclass="o-message o-message--notice o-message--warning"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="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><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div><divclass="o-message o-message--notice o-message--warning-light"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="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 Message

<h6class="center">Notice Messages</h6><divclass="demo-inner-message"><divclass="o-message o-message--notice-inner o-message--inform"data-o-component="o-message"data-close="false"><divclass="o-message__container"><divclass="o-message__content"><pclass="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><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div></div><divclass="demo-inner-message"><divclass="o-message o-message--notice-inner o-message--warning"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="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><divclass="demo-inner-message"><divclass="o-message o-message--notice-inner o-message--warning-light"data-o-component="o-message"><divclass="o-message__container"><divclass="o-message__content"><pclass="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><divclass="o-message__actions"><ahref="#"class="o-message__actions__primary">Button</a><ahref="#"class="o-message__actions__secondary">Text link</a></div></div></div></div></div>