Article

The article layout is used on article pages and diary posts.

View the code for this example

{% from 'includes/meta.njk' import meta as meta %}
{% from 'includes/title.njk' import title as pagetitle %}
{% from 'includes/breadcrumbs.njk' import breadcrumbs as breadscrumbs %}
{% from 'includes/card.njk' import card as card %}

<article class="article">
<header class="article-header">
  {{ breadscrumbs({
    items: [{
    title: 'Articles',
    url: '#'
  }]
  })}}
  {{ pagetitle({
    classes: 'space--margin-bottom-l',
    text: 'Example Article layout'
  }) }}
</header>

<footer class="article-footer">
  {{ meta({
    items: [{
      key: 'Date',
      value: '19 April 2023'
    }]
  }) }}
</footer>

<div class="article-content prose prose--flow">
  <p>Brownhills is where I grew up. It’s part of the Black Country, the heartland of England’s industrial revolution in the 18th and 19th centuries. Someone told me that Brownhills got its name from the brown earth spoil from digging the pits - known colloquially as “slag”.</p>
</div>

<nav class="article-related" aria-labelledby="similar-posts">
  <h2 id="similar-posts" class="space--margin-bottom-s">You might also like</h2>
  <ul class="list list--grid">
    <li>
      {{ card({
        title: 'A lovely day for boating',
        summary: 'A life on the open seas, a life on the ocean wave.',
        url: '#',
        date: {
          datetime: '2023-08-20T00:00:00Z',
          title: '20 August 2023'
        }
      })}}
    </li>
  </ul>
</nav>

</article>

Simplified layout

Shown below is a simplied version of the example above.


<article class="article"> <!-- can be applied to the main tag, too -->
  
  <header class="article-header">
    Header items, like title, breadcrumbs, or summary text.
  </header>

  <footer class="article-footer">
    Tangentially connected information, like meta.
  </footer>

  <div class="article-content prose prose--flow">
    The article body.
  </div>

  <nav class="article-related">
    Related articles.
  </nav>

</article>