Components

Composed UI patterns — chiplets, alerts, cards, speech bubbles and more.

• Accordion

  Grouped disclosure panels built on <details>.

• Alerts

  Inline status messages — info, success, warning, error.

• Avatar

  Circular portraits with size and stack variants.

• Blockquote

  Pull quotes with citation.

• Breadcrumbs

  Hierarchical navigation trail.

• Card

  Bordered surface for grouping related content.

• Chiplets

  Inline pills for counts, statuses, tags and categories.

• Details and summary

  Expandable disclosure widget.

• Dialog

  Native HTML dialog with styled backdrop.

• Empty state

  Placeholder shown when a list or page has no content.

• Stats

  Headline data points — large numbers with a heading above and a label below.

• Global footer

  Site footer with author card and social links.

• Horizontal rule

  Section break.

• Kanban

  Column-based lists for task-tracking pages.

• Key-value list

  Two-column list pairing a label with a value.

• Meter

  Scalar-value bar based on <progress>.

• Objects

  Decorative SVG illustrations — Game Boy, Switch, iPod, calendars, Polaroid and more.

• Pagination

  Paged navigation through lists.

• Polka background

  Full-bleed polka-dot background used behind related posts.

• Post-it note

  Coloured paper note, typically used for short asides.

• Progress

  Task-completion bar based on <progress>.

• Speech bubbles

  Chat-style bubbles for notes, replies and webmentions.

• Status dot

  Small solid circle paired with inline text.

• Skeleton

  Loading placeholder shapes.

• Skip link

  Keyboard shortcut to jump past the global header.

• Spinner

  Loading indicator.

• Toggles

  Mutually-exclusive filter buttons.

• Tooltip

  Small label shown on hover or focus.

• Webmentions

  Submission form and reply/interaction counts.