Skip to main content Skip to list of styles
Beta

This is a new service – give us your feedback to help improve it.

Styles

Headers

Use a standardised page header to start your page.

Contents

  1. Plain
  2. Accent
  3. Hero image

Always ensure your page header is within the <main> element and the breadcrumbs are not.

Plain

Open this example in new tab

HTML 

<div class="tna-accent-blue">
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-!--padding-top-s">
      <nav class="tna-breadcrumbs" data-module="tna-breadcrumbs" aria-label="Breadcrumbs">
        <ol class="tna-breadcrumbs__list">
          <li class="tna-breadcrumbs__item">
            <a href="#/home" class="tna-breadcrumbs__link">
              Home
            </a>
          </li>
          <li class="tna-breadcrumbs__item">
            <a href="#/parent" class="tna-breadcrumbs__link">
              Parent
            </a>
          </li>
        </ol>
      </nav>
    </div>
  </div>
  <main class="tna-main" id="main-content">
    <div class="tna-container tna-section">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <hgroup class="tna-hgroup-xl">
          <p class="tna-hgroup__supertitle">Parent</p>
          <h1 class="tna-hgroup__title">Section</h1>
        </hgroup>
        <p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="tna-container tna-section tna-!--no-padding-top">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et convallis lectus.</p>
        <p>Etiam mi sem, pretium ac fringilla at, tempus sed metus.</p>
      </div>
    </div>
  </main>
</div>

Nunjucks 

{% from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs %}

<div class="tna-accent-blue">
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-!--padding-top-s">
      {{ tnaBreadcrumbs({
        items: [
          {
            text: "Home",
            href: "#/home"
          },
          {
            text: "Parent",
            href: "#/parent"
          }
        ]
      }) }}
    </div>
  </div>
  <main class="tna-main" id="main-content">
    <div class="tna-container tna-section">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <hgroup class="tna-hgroup-xl">
          <p class="tna-hgroup__supertitle">Parent</p>
          <h1 class="tna-hgroup__title">Section</h1>
        </hgroup>
        <p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="tna-container tna-section tna-!--no-padding-top">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et convallis lectus.</p>
        <p>Etiam mi sem, pretium ac fringilla at, tempus sed metus.</p>
      </div>
    </div>
  </main>
</div>

Accent

Open this example in new tab

HTML 

<div class="tna-accent-blue">
  <div class="tna-background-accent">
    <div class="tna-container">
      <div class="tna-column tna-column--full tna-!--padding-top-s">
        <nav class="tna-breadcrumbs" data-module="tna-breadcrumbs" aria-label="Breadcrumbs">
          <ol class="tna-breadcrumbs__list">
            <li class="tna-breadcrumbs__item">
              <a href="#/home" class="tna-breadcrumbs__link">
                Home
              </a>
            </li>
            <li class="tna-breadcrumbs__item">
              <a href="#/parent" class="tna-breadcrumbs__link">
                Parent
              </a>
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
  <main class="tna-main" id="main-content">
    <div class="tna-background-accent">
      <div class="tna-container tna-section">
        <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
          <hgroup class="tna-hgroup-xl">
            <p class="tna-hgroup__supertitle">Parent</p>
            <h1 class="tna-hgroup__title">Section</h1>
          </hgroup>
          <p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <div class="tna-section tna-container">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et convallis lectus.</p>
        <p>Etiam mi sem, pretium ac fringilla at, tempus sed metus.</p>
      </div>
    </div>
  </main>
</div>

Nunjucks 

{% from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs %}

<div class="tna-accent-blue">
  <div class="tna-background-accent">
    <div class="tna-container">
      <div class="tna-column tna-column--full tna-!--padding-top-s">
        {{ tnaBreadcrumbs({
          items: [
            {
              text: "Home",
              href: "#/home"
            },
            {
              text: "Parent",
              href: "#/parent"
            }
          ]
        }) }}
      </div>
    </div>
  </div>
  <main class="tna-main" id="main-content">
    <div class="tna-background-accent">
      <div class="tna-container tna-section">
        <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
          <hgroup class="tna-hgroup-xl">
            <p class="tna-hgroup__supertitle">Parent</p>
            <h1 class="tna-hgroup__title">Section</h1>
          </hgroup>
          <p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
    <div class="tna-section tna-container">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et convallis lectus.</p>
        <p>Etiam mi sem, pretium ac fringilla at, tempus sed metus.</p>
      </div>
    </div>
  </main>
</div>

Hero image

Open this example in new tab

HTML 

<div class="tna-accent-blue">
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-!--padding-vertical-s">
      <nav class="tna-breadcrumbs" data-module="tna-breadcrumbs" aria-label="Breadcrumbs">
        <ol class="tna-breadcrumbs__list">
          <li class="tna-breadcrumbs__item">
            <a href="#/home" class="tna-breadcrumbs__link">
              Home
            </a>
          </li>
          <li class="tna-breadcrumbs__item">
            <a href="#/parent" class="tna-breadcrumbs__link">
              Parent
            </a>
          </li>
        </ol>
      </nav>
    </div>
  </div>
  <main class="tna-main" id="main-content">
    <header class="tna-hero tna-background-accent tna-hero--shift tna-hero--narrow">
      <figure class="tna-hero__figure">
        <div class="tna-container tna-hero__inner">
          <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
            <div class="tna-hero__content-inner">
              <hgroup class="tna-hgroup-xl tna-hero__heading">
                <p class="tna-hgroup__supertitle">Parent</p>
                <h1 class="tna-hgroup__title">
                  Section
                </h1>
              </hgroup>
              <p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
        </div>
        <picture class="tna-hero__image">
          <img src="https://picsum.photos/id/56/1200/480" alt="A mountain range" width="1200" height="480">
        </picture>
      </figure>
    </header>
    <div class="tna-section tna-container">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et convallis lectus.</p>
        <p>Etiam mi sem, pretium ac fringilla at, tempus sed metus.</p>
      </div>
    </div>
  </main>
</div>

Nunjucks 

{% from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs %}
{% from "nationalarchives/components/hero/macro.njk" import tnaHero %}

<div class="tna-accent-blue">
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-!--padding-vertical-s">
      {{ tnaBreadcrumbs({
        items: [
          {
            text: "Home",
            href: "#/home"
          },
          {
            text: "Parent",
            href: "#/parent"
          }
        ]
      }) }}
    </div>
  </div>
  <main class="tna-main" id="main-content">
    {{ tnaHero({
      supertitle: "Parent",
      title: "Section",
      body: '<p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
      imageSrc: "https://picsum.photos/id/56/1200/480",
      imageAlt: "A mountain range",
      imageWidth: 1200,
      imageHeight: 480,
      imageSources: {
        src: "https://picsum.photos/id/56/1200/480",
        width: 600,
        height: 400,
        type: "image/jpeg",
        media: "(max-width: 48em)"
      },
      narrow: true,
      style: "accent",
      layout: "shift"
    }) }}
    <div class="tna-section tna-container">
      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et convallis lectus.</p>
        <p>Etiam mi sem, pretium ac fringilla at, tempus sed metus.</p>
      </div>
    </div>
  </main>
</div>

Back to top