• Patterns
  • General

Table of Contents

  
<div class="panel--pad panel--separated">
  <nav role="navigation" class="table-of-contents grid-wrap">
    <div class="grid-col">
      <h2 class="delta">Table of contents</h2>
    </div>

    <div class="grid-col tablet-grid-one-third">
      <a href="#">Summary</a>
      <a href="#">Key Findings</a>
    </div>

    <div class="grid-col tablet-grid-one-third">
      <a href="#">Preliminary GDP Estimate</a>
      <a href="#">Inflation</a>
    </div>

    <div class="grid-col tablet-grid-one-third">
      <a href="#">International inflation, the exchange rate, and producer prices</a>
      <a href="#">Labour market</a>
    </div>
  </nav>
</div>

Developer Notes

This is reliant on CSS counters to generate the numbers. The presentation aspect is, unfortunately, handled by grids, as CSS columns are not mature enough for production even with polyfills.