Core

Every core component, grouped by task, with a live example, the markup to copy and when to use it.

A component is one reusable piece, almost always tied to one HTML element: a button, a field, a table. A pattern combines components to do a product task, such as a page shell or a site search; patterns are in the Catalog.

Actions and input

• Button

  Starts an action on the current page, such as saving, sending or opening a dialog.

• Copy button

  Copies a command or a value to the clipboard, and says it did.

• Dropdown

  A button that opens a short list of actions or links, anchored under it.

Form fields

• Inputs

  One control for each type of input: the type tells the browser the keyboard, the picker and the check.

• Choice

  Pick from options the reader can see: checkbox, radio, switch and select.

• Values

  Show or compute a value instead of collecting text: meter and output.

• Field parts

  What wraps a control: the label, the hint, the error and the group.

Show content

• Accordion

  Shows and hides sections of content with the native details and summary elements, one at a time if you name the group.

• Avatar

  Shows who a person or a team is, with their initials or a photo, in three sizes.

• Band

  Sets one block of a page on a tint that runs from edge to edge, while its content keeps the column.

• Card

  Groups a few facts about one thing on a bordered surface.

• Code

  Shows code inside a sentence, or in a block with syntax colours in every mode.

• Figure

  Shows an image, a chart or a diagram with a caption that says what it is.

• Icons

  Lets readers browse a set of icons by name and copy the SVG of each one.

• Meta line

  Shows a few facts about something on one line, such as its date, its reading time and its author, with a dot between them.

• Meter

  Draws a value in a known range as a bar, next to its figure, with the native meter element.

• Prose

  Sets long text in lines of about 70 characters, with space between its blocks, whatever markup an editor writes inside.

• Table

  Compares records across several attributes, in rows and columns that stay readable at 320 px.

• Tag and badge

  Labels an item with a short status or category (tag), or shows a count (badge).

Feedback and status

• Alert

  Tells the reader about the page or a task: information, success, a warning or an error.

• Modal

  Asks for a decision that must be made before the reader goes on, in a native dialog.

• Progress

  Shows how far a task that takes time has got, with the native progress element.

• Toast

  Confirms a small result, such as "Draft saved", without interrupting the reader.

• Tooltip

  Adds a short hint to a control on hover or focus; never essential content.

Navigation

• Breadcrumb

  Shows where the page sits in the site, as a trail of links to its parents.

• Color mode

  Lets readers choose Auto, light, dark or high contrast: radios that work without JavaScript, or one round button that steps through them.

• Pagination

  Links to the pages of a list that goes on over several, with the current page marked.

• Skip link

  Lets keyboard users jump past the header to the main content.

• Tabs

  Switches between panels of related content in one place; without JavaScript the panels are stacked sections.

Media

• Image

  Shows a picture in a frame of fixed shape, on a flat surface while it loads or when it is missing.

• Player

  Plays a video, a sound or a MIDI file in the page, with the same controls for all three.

Helpers

• Layout objects Lay out blocks in a stack, a row, a grid or beside an image, a group of actions, and the page itself with its sticky bar, with the o-* classes.
• Utility classes Small u-* classes that do one thing each, for the cases a component does not cover.
• Keyframes Five shared animations for your own components, which stop when the reader asks for reduced motion.