Pattern library

Numbered headers

Default view is vertical layout.
View full screen

Details

Source (Nunjucks)

<section class="w-numbered-headers">
<div class="w-measure-steps">
{% for step in data.steps %}
<div class="w-measure-step">
<h3 class="w-numbered-header {{ data.direction }}">{{ step.title }}</h3>
<div>{{ step.summary }}</div>
</div>
{% endfor %}
</div>
</section>

Output

<section class="w-numbered-headers">
<div class="w-measure-steps">

<div class="w-measure-step">
<h3 class="w-numbered-header w-numbered-header--vertical">Run tests on your site</h3>
<div>Enter your site&#39;s URL to see how well it performs across all audits.</div>
</div>

<div class="w-measure-step">
<h3 class="w-numbered-header w-numbered-header--vertical">Look at what matters</h3>
<div>See your site&#39;s performance across the areas you care about.</div>
</div>

<div class="w-measure-step">
<h3 class="w-numbered-header w-numbered-header--vertical">Get tips for improving</h3>
<div>Each test comes with helpful steps to improve your site&#39;s results.</div>
</div>

</div>
</section>

Variants

Horizontal

View full screen

Details

Source

<section class="w-numbered-headers">
<div class="w-measure-steps">
{% for step in data.steps %}
<div class="w-measure-step">
<h3 class="w-numbered-header {{ data.direction }}">{{ step.title }}</h3>
<div>{{ step.summary }}</div>
</div>
{% endfor %}
</div>
</section>

Output
<section class="w-numbered-headers">
<div class="w-measure-steps">

<div class="w-measure-step">
<h3 class="w-numbered-header w-numbered-header--horizontal">Run tests on your site</h3>
<div>Enter your site&#39;s URL to see how well it performs across all audits.</div>
</div>

<div class="w-measure-step">
<h3 class="w-numbered-header w-numbered-header--horizontal">Look at what matters</h3>
<div>See your site&#39;s performance across the areas you care about.</div>
</div>

<div class="w-measure-step">
<h3 class="w-numbered-header w-numbered-header--horizontal">Get tips for improving</h3>
<div>Each test comes with helpful steps to improve your site&#39;s results.</div>
</div>

</div>
</section>