Messages
The message component is used to provide a small message to users either in the body of content, or like a toast or snackbar.
<aside class="c-message">
<div class="c-message__wrapper">
<div class="c-message__body">
<p>This is a message, use this message to display important information. <a href="#">This is a link</a>.</p>
</div>
</div>
</aside><aside class="c-message">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon | u-tc-primary u-mt-xxs" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path d="M10 12H7V9H6V7h3v3h1v2ZM9 6H7V4h2v2Z"/>
</svg>
<div class="c-message__body">
<p>This is a message, use this message to display important information. <a href="#">This is a link</a>.</p>
</div>
</div>
</aside><div x-data="{ msgOpen: true }">
<button class="c-link-bare | u-mb" type="button" aria-label="Close Message" @click="msgOpen = ! msgOpen">
Open/Close
</button>
<aside class="c-message" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon | u-tc-primary u-mt-xxs" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path d="M10 12H7V9H6V7h3v3h1v2ZM9 6H7V4h2v2Z"/>
</svg>
<div class="c-message__body">
<p>This is a message, use this message to display important information. <a href="#">This is a link</a>.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div>Subtle Feedback Colour Types
Using our feedback colours, style the message consistently with other feedback types.
<div x-data="{ msgOpen: true }">
<aside class="c-message c-message--positive" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path d="M8.104 0A8 8 0 0 1 8 16a8.009 8.009 0 0 1-8-8v-.16A8 8 0 0 1 8.104 0Zm3.966 4.803a.9.9 0 0 0-1.267.127l-3.87 4.73-1.797-1.796a.9.9 0 1 0-1.272 1.272l2.5 2.5a.9.9 0 0 0 1.333-.066l4.5-5.5a.9.9 0 0 0-.127-1.267Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Success!</span>
<p>Hooray! You've done something cool like ... purchased a new car!</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-message c-message--warning" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="nonzero" d="M10 12H7V9H6V7h3v3h1v2ZM9 6H7V4h2v2Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Warning:</span>
<p>This is a message warning users about their next action, proceed with caution.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-message c-message--negative" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.003 0a8 8 0 1 1-.006 16 8 8 0 0 1 .006-16ZM8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-6a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V5a1 1 0 0 0-1-1Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Error:</span>
<p>Oops, something went wrong. Please go back and try again.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-message c-message--info" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="nonzero" d="M10 12H7V9H6V7h3v3h1v2ZM9 6H7V4h2v2Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Update:</span>
<p>This is a informative message, update users with some content.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div>Solid Feedback Colour Types
Using our feedback colours, style the message consistently with other feedback types but with a stronger more demanding design.
<div x-data="{ msgOpen: true }">
<aside class="c-message c-message--positive-solid" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path d="M8.104 0A8 8 0 0 1 8 16a8.009 8.009 0 0 1-8-8v-.16A8 8 0 0 1 8.104 0Zm3.966 4.803a.9.9 0 0 0-1.267.127l-3.87 4.73-1.797-1.796a.9.9 0 1 0-1.272 1.272l2.5 2.5a.9.9 0 0 0 1.333-.066l4.5-5.5a.9.9 0 0 0-.127-1.267Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Success!</span>
<p>Hooray! You've done something cool like ... purchased a new car!</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-message c-message--warning-solid" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="nonzero" d="M10 12H7V9H6V7h3v3h1v2ZM9 6H7V4h2v2Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Warning:</span>
<p>This is a message warning users about their next action, proceed with caution.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-message c-message--negative-solid" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="nonzero" d="M8.003 0a8 8 0 1 1-.006 16 8 8 0 0 1 .006-16ZM8 10a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-6a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V5a1 1 0 0 0-1-1Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Error:</span>
<p>Oops, something went wrong. Please go back and try again.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-message c-message--info-solid" x-show="msgOpen" x-transition.duration.500ms :class="msgOpen ? 'is-open' : 'is-closed'">
<div class="c-message__wrapper">
<svg class="c-message__icon c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="nonzero" d="M10 12H7V9H6V7h3v3h1v2ZM9 6H7V4h2v2Z"/>
</svg>
<div class="c-message__body | o-flow-sm">
<span class="u-heading u-epsilon">Update:</span>
<p>This is a informative message, update users with some content.</p>
</div>
<button class="c-message__close" type="button" aria-label="Close Message" @click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="aria-hidden">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</aside>
</div>