Site Message
A standard site message is a subtle non intrusive message which can be dismissed.
<div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
<p>
<strong class="u-tc-primary">Welcome to Listers</strong>
<svg class="u-inline u-mx-xs u-w-2px" viewBox="0 0 2 2" aria-hidden="true"><circle cx="1" cy="1" r="1"></circle></svg>
This is a non-important message, which can be dismissed.
<a class="c-link-bare | u-ml-xs" href="#">
Link
<span aria-hidden="true">→</span>
</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" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message c-message--primary"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
<p>
<strong class="u-dark">Welcome to Listers</strong>
<svg class="u-inline u-mx-xs u-w-2px" viewBox="0 0 2 2" aria-hidden="true"><circle cx="1" cy="1" r="1"></circle></svg>
This is a non-important message, which can be dismissed.
<a class="c-link-bare | u-ml-xs" href="#">
Link
<span aria-hidden="true">→</span>
</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" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message c-message--dark"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
<p>
<strong>Welcome to Listers</strong>
<svg class="u-inline u-mx-xs u-w-2px" viewBox="0 0 2 2" aria-hidden="true"><circle cx="1" cy="1" r="1"></circle></svg>
This is a non-important message, which can be dismissed.
<a class="c-link-bare | u-ml-xs" href="#">
Link
<span aria-hidden="true">→</span>
</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" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div>Feedback Types
Site messages can be used to convey a particular feedback state, such as a warning or error message.
<div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message c-message--positive-solid"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
This is a positive success message, which can be dismissed.
<a class="c-link-bare" href="#">
Link
<span aria-hidden="true">→</span>
</a>
</div>
<button class="c-message__close" type="button" aria-label="Close Message"
@click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message c-message--warning-solid"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
This is a warning message, which can be dismissed.
<a class="c-link-bare" href="#">
Link
<span aria-hidden="true">→</span>
</a>
</div>
<button class="c-message__close" type="button" aria-label="Close Message"
@click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message c-message--negative-solid"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
This is a negative error message, which can be dismissed.
<a class="c-link-bare" href="#">
Link
<span aria-hidden="true">→</span>
</a>
</div>
<button class="c-message__close" type="button" aria-label="Close Message"
@click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div><div x-data="{ msgOpen: true }">
<aside class="c-site-message c-message c-message--info-solid"
x-show="msgOpen"
x-collapse.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="o-wrapper">
<div class="c-message__wrapper">
<div class="c-message__body">
This is a informative message, which can be dismissed.
<a class="c-link-bare" href="#">
Link
<span aria-hidden="true">→</span>
</a>
</div>
<button class="c-message__close" type="button" aria-label="Close Message"
@click="msgOpen = false">
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
</div>
</aside>
</div>Privacy Notice
A bottom aligned privacy notice.
<div x-data="{ msgOpen: true }">
<aside class="c-site-privacy c-message c-message--muted"
x-show="msgOpen"
x-transition.duration.500ms
:class="msgOpen ? 'is-open' : 'is-closed'"
>
<div class="c-message__wrapper | u-p">
<div class="c-message__body | o-flow">
<p>This website uses cookies to store functional information and provide live chat support. Accepting our cookies is optional but recommended for a better experience. For more information on what we store see our <a href="#cookies">Cookie Policy</a>.</p>
<div class="u-space-x-sm">
<a href="#accept" class="c-btn c-btn--primary" @click="msgOpen = false">Accept all</a>
<a href="#reject" class="c-btn c-btn--tertiary" @click="msgOpen = false">Reject all</a>
</div>
</div>
</div>
</aside>
</div>