Pattern library

Headline

View full screen

Details

Source (Nunjucks)

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output

<h2 class="w-headline">A headline</h2>

Variants

one

View full screen

Details

Source

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output
<h2 class="w-headline--one">A headline</h2>

two

View full screen

Details

Source

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output
<h2 class="w-headline--two">A headline</h2>

two-small

View full screen

Details

Source

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output
<h2 class="w-headline--two-small">A headline</h2>

two-faded

View full screen

Details

Source

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output
<h2 class="w-headline--two-faded">A headline</h2>

three

View full screen

Details

Source

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output
<h2 class="w-headline--three">A headline</h2>

four

View full screen

Details

Source

<h2 class="w-headline{{ data.modifier }}">{{ data.title }}</h2>

Output
<h2 class="w-headline--four">A headline</h2>