Components

Category All components

25–48 of 111 components

Section heading

A section introduction: optional eyebrow, a heading whose level is set apart from its size, a description held to about 70 characters a line and an optional action that sits on the text's last line.
- Control
- No additional dependencies
Testimonial grid

A section of customer quotes shown all at once, in equal rows or packed masonry columns, with one quote optionally set large across two columns. Attributions line up across each row.
- Section
- No additional dependencies
Text-first hero

A homepage opener built only from type: an optional eyebrow, a large headline, a supporting paragraph, a filled primary link, an optional secondary link and an optional note. No media, and no client JavaScript required.
- Section
- No additional dependencies
Feature card

One capability on a card: an optional icon or framed image, a title with an optional badge, a short description and a detail link pinned to the bottom, so cards in a row line up.
- Section
- No additional dependencies
Legal links row

A compact row of policy links (privacy, terms, cookies, accessibility) for a footer's small print or a checkout page, with optional copyright and a Cookie settings button, divided by CSS dots or bars.
- Control
- No additional dependencies
Newsletter footer

A site footer led by a newsletter signup, one field-and-button row under a short title, with link columns beside or below it and a copyright bar. Connect your own email service.
- Section
- Needs a service
Social links group

A compact list of links to an organisation's own social profiles: optically balanced monochrome marks on even square targets, with optional names, handles and a heading. Ships no URLs of its own.
- Control
- No additional dependencies
Content tabs

Tabs that switch between related panels: an underline row or a segmented pill track, horizontal or as a vertical rail, with optional icons and count badges, overflow scrolling and manual activation.
- Control
- bits-ui ^2.0.0
- Dark mode
Process steps

Numbered steps of a linear process for a "How it works" section: a row with a rule running between the markers from 1024 px, a vertical rail below it, and an optional closing action.
- Section
- No additional dependencies
FAQ accordion

Questions and plain-text answers in a hairline-divided accordion, with the section heading in a left rail on wide screens. Visitors open the answers they need with disclosure buttons.
- Section
- No additional dependencies
Grouped FAQ

FAQ questions split into named topics, each with a heading and native disclosures, and a topic index that jumps to each group, above the groups or in a sticky side column.
- Section
- No additional dependencies
Accordion

A group of headed panels that open one at a time or several at once, set as one hairline panel of rows or as separate cards. Each row can carry its current value, so closed rows still read as a summary.
- Control
- No additional dependencies
Newsletter signup

A dark newsletter band that splits the offer from a single control row holding the field and its button. Connect your own email service to accept subscriptions.
- Section
- Needs a service
Call-to-action section

A closing call-to-action section: a dark band with a display-size headline, one filled action and an optional text-link secondary. Centred or start-aligned, with optional media, or plain on the page.
- Section
- No additional dependencies
Testimonial card

One customer quote with name, role, company, portrait or initials, optional logo and source link. A card for grids and rows, or a large featured quote set in display type mid-page.
- Section
- No additional dependencies
Action button

A labelled action button in primary, secondary, ghost and destructive priorities and three sizes, with optional icons and a pending state that holds its width and focus. Renders a <button>, or an <a> when given href.
- Control
- No additional dependencies
Choice cards

Radio or checkbox choices set as cards in a fieldset: title, description, a price at the foot, optional media and badge. Native inputs, so it submits without JavaScript; rows share their lines through subgrid.
- Control
- No additional dependencies
Form field

One form field in the GOV.UK order: label, hint, error, control, optional character count. It wires the ids so the control gets aria-describedby and aria-invalid, and hangs an error rule beside the field.
- Control
- No additional dependencies
Results statistics

A band of headline figures, each paired with what it measures and when, with numbered methodology notes linked both ways. Row, two-by-two or split beside the heading; plain, panel or dark.
- Section
- No additional dependencies
Text reveal

A heading that reveals its words, lines or characters once, within a capped duration, while the full text stays readable to screen readers, search engines and visitors without JavaScript.
- Control
- No additional dependencies
Button group

A labelled group of related buttons, spaced (wrapping, placed by align) or attached as one strip with single hairline seams and outer-only corners, in a row or a column. Your buttons go in as children.
- Control
- No additional dependencies
Icon button

A square or round icon-only button in primary, secondary and ghost priorities and three sizes, with a required accessible name that doubles as a hover and focus hint, and an optional pressed state for toggles.
- Control
- No additional dependencies
Load more button

A load-more control for the foot of a list: the closing rule fills as a progress track, with a count, one button, and pending, retry and end-of-list states. You supply the paging.
- Control
- Needs a service
Text field

A single-line text field with an always-visible label, Required or Optional marker, hint, consumer-set error, and prefix or suffix adornments inside one border. A native input that submits before hydration.
- Control
- No additional dependencies