Skip to main content Skip to list of components
Beta

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

Components

Hero

Use the hero component to start an article.

Contents

  1. Status
  2. Images
Open this example in new tab

HTML 

<header class="tna-hero">
  <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">
          <h1 class="tna-heading-xl tna-hero__heading">
            This is a hero component
          </h1>
          <p>You can use it to introduce a new idea.</p>
        </div>
      </div>
    </div>
    <picture class="tna-hero__image">
      <img src="https://picsum.photos/id/29/1200/480" alt="A mountain range" width="1200" height="480">
    </picture>
  </figure>
</header>

Nunjucks

Nunjucks options
Primary options
Name Type Description
supertitle string

The smaller title to display above the main hero title.
title string

The main title of the hero. If set, then headingLevel also needs to be set.
headingLevel number

The heading level which represents an element from <h1> through to <h6>. Default is 1.
headingSize string

The physical size of the hero title (xl, l, m or s). Default is xl.

Default: m
body string
text string
imageSrc string

Required.

imageAlt string

Required.

imageWidth number

Required.

imageHeight number

Required.

imageSources array

Required.

Alternative sources of the image which can include WebP files.

See imageSources.
imageCaption string
actions array

An array of actions to add at the bottom of the hero component. Each action is displayed as a button.

See actions.
style string

The style of hero to use. This can be contrast, tint or accent.
layout string

An alternative layout of the hero component to use. This can be shift or split.
classes string

Classes to add to the hero.
attributes object

HTML attributes (for example data attributes) to add to the hero.
Options for imageSources
Name Type Description
src string

Required.

type string

Required.

media string
width number
height number
Options for actions
Name Type Description
text string

Required.

The text for the action.
href string

Required.

The URL of the action.
title string

An optional title for the action.
icon string

The name of a Font Awesome icon, without the prefixed fa-.
rightAlignIcon boolean

If true, align the icon to the right hand side of the button.
classes string

Classes to add to the hero action.
attributes object

HTML attributes (for example data attributes) to add to the hero action.

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

{{ tnaHero({
  title: "This is a hero component",
  text: "You can use it to introduce a new idea.",
  imageSrc: "https://picsum.photos/id/29/1200/480",
  imageAlt: "A mountain range",
  imageWidth: 1200,
  imageHeight: 480
}) }}

Status

Status
Ready for production
Tested without CSS
Yes
WCAG 2.2 AA compliant
Yes
Analytics integrated
In development
Documentation complete
No

Images

As the height of a hero component is defined by their content, the background image will sometimes be clipped.

Try to use an image with a 5:2 aspect ratio with a suggested resolution of 1200px wide and 480px tall.

The hero element can also accept images for other screen sizes so use a 3:2 aspect ratio with a suggested resolution of 600px wide and 400px tall for smaller screens.

Back to top