```
```tsx
import { ServiceList, ServiceListItem } from '@govtech-bb/react';
Family, birth and relationships
Travel and transport
;
```
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.
```html title="Signpost service list"
```
```tsx
import { ServiceList, ServiceListItem } from '@govtech-bb/react';
Register a birth
;
```
## 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](/components/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`.