Skip to main content
Official government website
GovBB Design System
Menu

Service list

A list of bold green links to services, with optional descriptions and tags.

Examples
HTML and React
Group
Navigation
On this page

Preview

Service list
Open in new tab

The Service list component is a vertical list of navigation entries separated by a neutral rule. Each entry is a card: a heading holding an underlined link, an optional one-line description and an optional tag naming the kind of service, such as “Digital service” or “Information service”.

It has two looks. The default, for listings of categories, gives entries big bold green names at heading-three size. The signpost look, for the service links inside a category, keeps names at the quiet body size in the standard teal link colour, with a divider that thickens from 2px to 4px from tablet width.

Whole-card click target

The whole entry is clickable, following the GOV.UK cards pattern: the link carries a stretched pseudo-element that covers the entire item, so tapping the description or the space around it follows the link too. There is still exactly one link per entry, and its accessible name is the service name; the description stays plain text. Hovering or focusing anywhere on the card shows the link’s own hover and focus states, since the whole area is the link.

Because the markup relies on this, do not add a second link or other interactive control inside an entry; the stretched link would sit on top of it.

Signpost look

Use the govbb-service-list--signpost modifier (or variant="signpost" in React) for the links inside a category: the destinations are services, not more categories, so the names step down to regular-weight body-size links in the standard teal. The markup, whole-card click behaviour, descriptions and tags all work the same as the default look.

Signpost service list
Open in new tab

Usage

When to use

  • Use a service list when users choose a destination from related services, categories or topics.
  • Use a description or tag only when it helps users distinguish similar destinations.

When not to use

  • Do not use it for general prose or task steps; use a list.
  • Do not use it to show the path to the current page; use breadcrumbs.

Best practices

Make each destination distinct

Use a short, unique service name as the link. Add a one-sentence description when the name alone does not explain the task, and keep descriptions parallel across the list.

Keep one destination per item

The whole item is a larger target for its single link. Do not add another link, button or interactive control inside it. Choose a heading level that fits the page outline.

Heading level

Each entry’s name is a heading, so screen reader users can jump between services. The visual size stays the same at every level; pick the level that fits the page outline with headingLevel (h2, h3 or h4; the default is h3), or by changing the element in HTML.

Client-side routing

In React each item accepts a linkComponent, the same adapter pattern as the link component, so a single-page app can navigate without a full page load. Anchor attributes, including analytics data attributes, are spread onto the link.

Some routers’ links take something other than href — TanStack Router’s takes to — so linkComponent will not type-check against them. Use renderLink instead: it is called with { href, className, children }, where children is the service name, and you render whatever the router needs. It takes precedence over linkComponent.