Feature

One thing described: a picture of it beside its name, a sentence or two, and its main points. An identity card, a certificate, a new building, a programme.

When to use

When people need to recognise something or know what it has: what the new card looks like, what a permit lets you do, what a treatment works will supply. Once on a home page, or at the top of the page about that thing.

When not to use

At the very top of a home page, where the hero belongs. For a person, use the statement or people. For a list of services, use cards.

A water quality certificate: a blue card with the agency's mark, a district name and a date.

The water quality certificate

Every public supply that passes inspection is given one. It is displayed at the works and published online.

The district and the supply it covers
The date of the last inspection
A number you can check on this site
Valid for twelve months

Check a certificate

Show HTML

<div class="ag-feature ag-mb-0">
  <figure class="ag-figure ag-feature__media">
    <img
      class="ag-figure__image"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Crect width='8' height='5' rx='0.3' fill='%23c7d6e3'/%3E%3Crect x='0.6' y='1.2' width='2' height='2.6' fill='%231f4e79'/%3E%3Crect x='3.2' y='1.3' width='3.8' height='0.4' fill='%231f4e79'/%3E%3Crect x='3.2' y='2.2' width='2.6' height='0.3' fill='%23ffffff'/%3E%3Crect x='3.2' y='2.9' width='3.2' height='0.3' fill='%23ffffff'/%3E%3C/svg%3E"
      alt="A water quality certificate: a blue card with the agency's mark, a district name and a date."
      width="800"
      height="500"
      loading="lazy"
    />
  </figure>
  <div class="ag-feature__body">
    <h2 class="ag-feature__title">The water quality certificate</h2>
    <p>Every public supply that passes inspection is given one. It is displayed at the works and published online.</p>
    <ul class="ag-feature__list">
      <li>The district and the supply it covers</li>
      <li>The date of the last inspection</li>
      <li>A number you can check on this site</li>
      <li>Valid for twelve months</li>
    </ul>
    <p><a href="#feature-example">Check a certificate</a></p>
  </div>
</div>

Picture after the text

Kano treatment works

Opening in March. Clean water for 40,000 households in four districts.

About the project

Show HTML

<div class="ag-feature ag-feature--reverse ag-mb-0">
  <figure class="ag-figure ag-feature__media">
    <img
      class="ag-figure__image"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Crect width='8' height='5' fill='%23d9e4ec'/%3E%3Crect x='1' y='2' width='6' height='2.4' fill='%231f4e79'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%231f4e79'/%3E%3C/svg%3E"
      alt=""
      width="800"
      height="500"
      loading="lazy"
    />
  </figure>
  <div class="ag-feature__body">
    <h2 class="ag-feature__title">Kano treatment works</h2>
    <p>Opening in March. Clean water for 40,000 households in four districts.</p>
    <p><a href="#feature-reverse">About the project</a></p>
  </div>
</div>

How it works

Picture and text sit side by side from tablet width up, and stack on a phone with the picture first.
ag-feature--reverse puts the picture after the text on wide screens.
ag-feature__list is for the main points, four to six of them. Each is marked with a square in the pack's accent colour.
Inside a band the text takes the band's colour, so the same markup works on a tinted, dark or primary background.
The title is a heading at the level the page needs. The list and the link are optional.

Accessibility

If the picture shows what the thing looks like, describe it in the alt text: its shape, colour and what is printed on it. If the text beside it already says all of that, leave the alt empty.
Never put the main points inside the picture. They are a real list, so they can be read, translated and resized.
A drawing of an identity document should be a simplified illustration, never a copy someone could print.