Pattern library

Banners

Hidden in small viewports so increase the sample window size.

Default banners can be added to site templates (for example, landing pages) to provide timely information to users (for example, an alert about an upcoming conference). Don't use default banners in the body of a post; instead, use the body variant.

View full screen

Details

Source (Nunjucks)

<div class="w-banner {{ data.modifier }}" role="banner">
{{ data.content | safe }}
</div>

Output

<div class="w-banner w-banner--neutral" role="banner">
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</div>

Variants

Body

View full screen

Details

Source

<div class="w-banner {{ data.modifier }}" role="banner">
{{ data.content | safe }}
</div>

Output
<div class="w-banner w-banner--neutral" role="banner">
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</div>

Caution

View full screen

Details

Source

<div class="w-banner {{ data.modifier }}" role="banner">
{{ data.content | safe }}
</div>

Output
<div class="w-banner w-banner--neutral" role="banner">
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</div>

Info

View full screen

Details

Source

<div class="w-banner {{ data.modifier }}" role="banner">
{{ data.content | safe }}
</div>

Output
<div class="w-banner w-banner--neutral" role="banner">
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</div>

Warning

View full screen

Details

Source

<div class="w-banner {{ data.modifier }}" role="banner">
{{ data.content | safe }}
</div>

Output
<div class="w-banner w-banner--neutral" role="banner">
Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</div>