Pattern library

Page Header

View full screen

Details

Source (Nunjucks)

<header class="w-page-header">
<h1 class="w-page-header__headline">{{ data.title }}</h1>
{% if data.summary %}
<p class="w-page-header__copy">{{ data.summary }}</p>
{% endif %}
</header>

Output

<header class="w-page-header">
<h1 class="w-page-header__headline">A page header</h1>

<p class="w-page-header__copy">Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</header>

Variants

with-no-summary

View full screen

Details

Source

<header class="w-page-header">
<h1 class="w-page-header__headline">{{ data.title }}</h1>
{% if data.summary %}
<p class="w-page-header__copy">{{ data.summary }}</p>
{% endif %}
</header>

Output
<header class="w-page-header">
<h1 class="w-page-header__headline">A page header with no summary</h1>

<p class="w-page-header__copy">Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</header>