Service card

For a home page or a department page that lists services. The whole card is clickable; only the title is a link.

When not to use

For content that is not a destination. A card with no link is a box, and boxes are noise. Use plain headings and text.

Renew a passport

Apply online, pay, and collect from the office you choose. Takes about 10 minutes.

Online
Register a birth

Within 60 days of the birth. Free at any registration centre.

In person
Check your ID number

Confirm your details are correct and update a wrong name or date of birth.

Online

Show HTML

<ul class="ag-cards ag-mb-0">
  <li class="ag-card">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-example">Renew a passport</a></h3>
    <p class="ag-card__text">Apply online, pay, and collect from the office you choose. Takes about 10 minutes.</p>
    <p class="ag-card__meta"><span class="ag-badge ag-badge--success">Online</span></p>
  </li>
  <li class="ag-card">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-example">Register a birth</a></h3>
    <p class="ag-card__text">Within 60 days of the birth. Free at any registration centre.</p>
    <p class="ag-card__meta"><span class="ag-badge ag-badge--neutral">In person</span></p>
  </li>
  <li class="ag-card">
    <h3 class="ag-card__title">
      <a class="ag-card__link" href="#card-example">Check your <span data-docs-string="id-short">ID number</span></a>
    </h3>
    <p class="ag-card__text">Confirm your details are correct and update a wrong name or date of birth.</p>
    <p class="ag-card__meta"><span class="ag-badge ag-badge--success">Online</span></p>
  </li>
</ul>

Accessibility

The link is stretched over the card with CSS, so one Tab stop per card and the title is what gets read.
The focus ring is drawn on the card, not the title, so it is obvious which card is selected.
Keep text inside the card short and unlinked. A second link inside a stretched link is unreachable by mouse.
Three to six cards a row. More than that is a list, so use a list.

With a logo

For agencies, partners or programmes that have a mark of their own, put it in the ag-card__logo slot above the title. The box has a fixed height, so marks of any shape line up across the grid, and the image is fitted inside it, never cropped or stretched. The name stays as the link text, so the image is decorative and gets alt="". Keep each mark under 20 KB, as SVG where the agency has one.

NWA

National Water Agency
RBA

River Basins Authority
WRC

Water Regulatory Commission

Show HTML

<ul class="ag-cards ag-mb-0">
  <li class="ag-card">
    <div class="ag-card__logo">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 89'%3E%3Crect width='200' height='89' rx='4' fill='%231f4e79'/%3E%3C/svg%3E"
        alt=""
        width="200"
        height="89"
        loading="lazy"
      />
    </div>
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-logo-example">NWA</a></h3>
    <p class="ag-card__text">National Water Agency</p>
  </li>
  <li class="ag-card">
    <div class="ag-card__logo">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='4' fill='%23ffbf47'/%3E%3C/svg%3E"
        alt=""
        width="100"
        height="100"
        loading="lazy"
      />
    </div>
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-logo-example">RBA</a></h3>
    <p class="ag-card__text">River Basins Authority</p>
  </li>
  <li class="ag-card">
    <div class="ag-card__logo">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Crect width='140' height='100' rx='4' fill='%23c7d6e3'/%3E%3C/svg%3E"
        alt=""
        width="140"
        height="100"
        loading="lazy"
      />
    </div>
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-logo-example">WRC</a></h3>
    <p class="ag-card__text">Water Regulatory Commission</p>
  </li>
</ul>

Placeholder shapes stand in for the marks. The markup is the same.

Variants

ag-card--tinted puts the card on the alternate paper colour. ag-card--plain drops the coloured top border for a quieter grid. ag-card__image above the title carries a photograph that bleeds to the card's edges; it is decorative, alt="", because the title is the link.

Tinted card

On the alternate paper colour.
Plain card

No coloured top border.
Card with a photograph

The image bleeds to the edges above the title.

Show HTML

<ul class="ag-cards ag-mb-0">
  <li class="ag-card ag-card--tinted">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-variants">Tinted card</a></h3>
    <p class="ag-card__text">On the alternate paper colour.</p>
  </li>
  <li class="ag-card ag-card--plain">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-variants">Plain card</a></h3>
    <p class="ag-card__text">No coloured top border.</p>
  </li>
  <li class="ag-card">
    <div class="ag-card__image">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c7d6e3'/%3E%3C/svg%3E"
        alt=""
        width="600"
        height="400"
        loading="lazy"
      />
    </div>
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-variants">Card with a photograph</a></h3>
    <p class="ag-card__text">The image bleeds to the edges above the title.</p>
  </li>
</ul>

Accent edge

ag-card--accent draws the top edge in the pack's accent colour, where a set of cards should carry the country's second colour. The edge is decoration, so it needs no contrast with the page.

Report a leak

Tell us where and we will send a crew.
Pay a bill

By card, bank transfer or mobile money.

Show HTML

<ul class="ag-cards ag-mb-0">
  <li class="ag-card ag-card--accent">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-accent">Report a leak</a></h3>
    <p class="ag-card__text">Tell us where and we will send a crew.</p>
  </li>
  <li class="ag-card ag-card--accent">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-accent">Pay a bill</a></h3>
    <p class="ag-card__text">By card, bank transfer or mobile money.</p>
  </li>
</ul>

Flag edge

ag-card--flag draws the top edge as the country's flag colours, the same line as the flag stripe. For the few cards on a page that should carry the whole flag, such as national programmes. The rest stay green.

National water programme

Clean water to every district by 2030.
Sanitation for schools

Toilets and handwashing in 4,000 schools.

Show HTML

<ul class="ag-cards ag-mb-0">
  <li class="ag-card ag-card--flag">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-flag">National water programme</a></h3>
    <p class="ag-card__text">Clean water to every district by 2030.</p>
  </li>
  <li class="ag-card ag-card--flag">
    <h3 class="ag-card__title"><a class="ag-card__link" href="#card-flag">Sanitation for schools</a></h3>
    <p class="ag-card__text">Toilets and handwashing in 4,000 schools.</p>
  </li>
</ul>

Horizontal

ag-card--horizontal puts the logo or image beside the text instead of above it. Wrap the title, text and meta in ag-card__body, and give the list ag-cards--wide so the columns have room for both. Good for a list of agencies or partners on a content page, where a grid would be too much.

NWA

National Water Agency
Kano treatment works

Clean water for 40,000 households from March.

Show HTML

<ul class="ag-cards ag-cards--wide ag-mb-0">
  <li class="ag-card ag-card--horizontal">
    <div class="ag-card__logo">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%231f4e79'/%3E%3C/svg%3E"
        alt=""
        width="200"
        height="89"
        loading="lazy"
      />
    </div>
    <div class="ag-card__body">
      <h3 class="ag-card__title"><a class="ag-card__link" href="#card-horizontal">NWA</a></h3>
      <p class="ag-card__text">National Water Agency</p>
    </div>
  </li>
  <li class="ag-card ag-card--horizontal">
    <div class="ag-card__image">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23d9e4ec'/%3E%3C/svg%3E"
        alt=""
        width="600"
        height="400"
        loading="lazy"
      />
    </div>
    <div class="ag-card__body">
      <h3 class="ag-card__title"><a class="ag-card__link" href="#card-horizontal">Kano treatment works</a></h3>
      <p class="ag-card__text">Clean water for 40,000 households from March.</p>
    </div>
  </li>
</ul>