Numbered headers - Component

A simple pattern for adding numbers to headed sections of content. Use the cluster compostion to render the numbers horizontally.

View full screen

Code

Source (Nunjucks)

<section class="numbered-headers">
  {% for step in data.steps %}
    <div class="numbered-headers__step">
      <div class="numbered-headers__heading {{ data.utilities.heading }}">
        <h3 class="text-size-3">{{ step.title }}</h3>
      </div>
      <p>{{ step.summary }}</p>
    </div>
  {% endfor %}
</section>

Output

<section class="numbered-headers">
  <div class="numbered-headers__step">
    <div class="numbered-headers__heading">
      <h3 class="text-size-3">Run tests on your site</h3>
    </div>
    <p>Enter your site's URL to see how well it performs across all audits.</p>
  </div>
  <div class="numbered-headers__step">
    <div class="numbered-headers__heading">
      <h3 class="text-size-3">Look at what matters</h3>
    </div>
    <p>See your site's performance across the areas you care about.</p>
  </div>
  <div class="numbered-headers__step">
    <div class="numbered-headers__heading">
      <h3 class="text-size-3">Get tips for improving</h3>
    </div>
    <p>Each test comes with helpful steps to improve your site's results.</p>
  </div>
</section>