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 one of the common standardised header patterns 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. Aenean hendrerit fermentum sapien, eget cursus nisi vehicula at.</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. Aenean hendrerit fermentum sapien, eget cursus nisi vehicula at.</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. Aenean hendrerit fermentum sapien, eget cursus nisi vehicula at.</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. Aenean hendrerit fermentum sapien, eget cursus nisi vehicula at.</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--split 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. Aenean hendrerit fermentum sapien, eget cursus nisi vehicula at.</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: "split"
    }) }}
    <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. Aenean hendrerit fermentum sapien, eget cursus nisi vehicula at.</p>
      </div>
    </div>
  </main>
</div>

Back to top