Components

Thirty-nine building blocks. Each is a class on a plain element, works without JavaScript, and is tested with axe with every country pack on every pull request.

Page furniture

• Skip link: the first thing a keyboard reaches.
• Official website banner: flag and official-site notice above the header.
• Header and navigation: organisation name and primary navigation.
• Footer: link columns and legal bar.
• Hero: the top of a home page, with an optional image beside the text.
• Band: a full-width section with a tinted, primary or dark background.
• Breadcrumb: where this page sits.
• Back link: the previous step of a form.
• Pagination: moving through a long list.
• Language switcher: this page in each official language.
• Social links: the organisation's accounts, in the footer.

Actions

• Button: primary, secondary, warning and start.

Forms

• Text input: one line of text, with label, hint and error.
• Textarea: more than one line.
• Character count: a textarea with a limit people can see.
• Select: one choice from a long list.
• Radios: one choice from a short list.
• Checkboxes: any number of choices.
• Input group: a prefix or suffix, for money and units.
• Phone number: dialling code from the pack, national number.
• National ID number: label, hint, length and pattern from the pack.
• Region selector: region then sub-region, divisions from the pack.
• Date input: day, month, year.
• Error summary: every error on the page, at the top.

Content and feedback

• Alert: information, success, warning, error.
• Badge: a status word.
• Dated list: news, events and documents with a date under each link.
• Download link: a file link that says the format and size.
• Empty state: a listing with nothing to list yet.
• Image and figure: captioned photographs and a gallery grid.
• Statement: a message from the head of the organisation, with their portrait.
• Details: one disclosure for help some people need.
• Accordion: sections that open and close.
• Currency display: amounts written the local way.
• Table: rows and columns of data.
• Confirmation panel: the end of a service.
• Summary list: check your answers.
• Service card: a list of services, whole card clickable.
• Inset text: a callout inside content.

Not in the system, on purpose

No modal, no toast, no carousel, no date picker. Each is cut with a reason in decision 003.