Elements

All elements

Domain-neutral interface building blocks with complete visual, behavior, platform, token, and accessibility contracts.

48 reference-catalog elements1 navigation supplement1 planned10 categories

Overview

Elements are the smallest reusable interface building blocks above foundations and tokens. Each element solves a specific semantic, interaction, content, or accessibility need and composes with other elements without changing its native meaning.

The audited v4.2.0 categorized reference contains 48 entries. Scheme dropdown appears in the reference navigation but not that categorized list, so it is retained here as one clearly labelled navigation supplement rather than being counted as a catalog entry.

Element Catalog

Actions and links

Trigger commands, navigate, and provide efficient escape or recovery paths.

↑ Back to top

implemented

Back to top

Returns users to the beginning of a long page.

.he-link

implemented

Button group

Organizes multiple related actions into one labelled collection.

.he-button

implemented

Button

Triggers a page, form, or application action.

.he-button

Explore guidance →

implemented

Call to action

Presents a prominent action or destination with clear intent.

.he-button

implemented

Menu dropdown

Reveals a list of related options or actions from a trigger.

.he-popover

implemented

Skip link

Lets keyboard users bypass repeated navigation and reach primary content.

.he-link

Data

Present values, metadata, categories, and structured records.

implemented

Badge

Displays a compact non-interactive count or status value.

.he-status-badge

◷ 6 minute read

implemented

Readtime

Displays an estimated duration for consuming content.

span

Example records
Name	State
Alpha	Ready
Beta	Review

implemented

Table

Organizes related records into labelled rows and columns.

.he-data-table

Research

implemented

Tag

Categorizes content or adds concise non-interactive context.

.he-tag

19 Jul 2026, 16:00

implemented

Timestamp

Displays a locale-aware date, time, or relative-time value.

time

Emphasis

Call attention to quotations, sources, and high-value facts without changing semantics.

Systems become trustworthy when their decisions are visible.
Design principle

implemented

Blockquote

Distinguishes a quotation and its source from surrounding prose.

blockquote

Supplemental evidence¹

Source note with return link. ↩

planned

Footnote

Connects content to supplemental information or a source note.

sup + a + ol

98.4%Successful checksPrevious period 97.8%

implemented

Statistic

Highlights a key value with a label and optional supporting context.

.he-metric-card

Imagery

Represent people, concepts, and actions with governed visual assets.

implemented

Avatar

Represents a person or entity with an image, initials, or fallback.

.he-avatar

implemented

Icon

Displays a governed Tabler glyph at a semantic size and color.

.he-icon-button

Media

Present time-based media with controls, alternatives, and loading states.

00:0032%Transcript

implemented

Audio player

Plays audio with accessible controls and transcript access.

audio

Video titleCaptions available

implemented

Video embed

Embeds video with a preview, playback controls, captions, and transcript access.

video or iframe

Navigation

Orient users and move between destinations, sections, pages, and process steps.

implemented

Breadcrumb

Shows hierarchical location through an ordered trail of links.

.he-breadcrumb

implemented

Footer

Provides persistent site-level navigation, legal, and support information.

footer

implemented

Jump links

Provides persistent links to headings within the current page.

.he-sidenav

Current destination

implemented

Navigation link

Represents one destination within a navigation component.

.he-link

implemented

Navigation (primary)

Provides persistent top-level navigation and orientation.

.he-topbar

implemented

Navigation (secondary)

Connects peer destinations within a subsection.

.he-tabs

implemented

Navigation (vertical)

Organizes hierarchical destinations in a vertical rail.

.he-sidenav

implemented

Pagination

Moves between pages in a larger result or content set.

.he-pagination

Define
Build
Validate

implemented

Progress stepper

Communicates position and completion within a multi-step process.

.he-stepper

implemented

Subnavigation

Displays a compact horizontal set of related destinations.

.he-tabs

Overlays

Reveal contextual or modal content while preserving focus and dismissal behavior.

implemented

Dialog

Requires attention for confirmation, critical information, or focused input.

.he-dialog

implemented

Popover

Reveals contextual information or controls without blocking the page.

.he-popover

implemented

Tooltip

Provides brief supplementary text for a focused or hovered control.

.he-tooltip

Selection

Choose, filter, or toggle values and presentation preferences.

implemented

Chip

Applies a compact filter or represents a removable selection.

.he-tag

Color scheme

implementednavigation supplement

Scheme dropdown

Selects a supported color-scheme preference from a menu.

.he-select

Color scheme System Light Dark

implemented

Scheme toggle

Cycles or switches between supported color-scheme preferences.

.he-switch

Region

implemented

Select

Chooses one value from a bounded list of options.

.he-select

Automatic updates

implemented

Switch

Toggles an immediately applied setting between on and off.

.he-switch

Status

Communicate progress, health, availability, and non-blocking feedback.

Changes savedThe latest version is available.

implemented

Alert

Communicates important non-blocking information and available actions.

.he-alert-banner

AHealthyEvidence updated recently

implemented

Health index

Summarizes an evaluated health grade with a written label and evidence link.

.he-status-badge

All systems operationalUpdated 2 minutes ago

implemented

Site status

Communicates the current operational condition of a service or domain.

.he-service-health-row

implemented

Skeleton

Reserves layout while content is loading without implying final values.

.he-skeleton

Loading results

implemented

Spinner

Indicates that a bounded action or region is processing.

.he-progress

Structure

Group, reveal, and arrange related content into understandable regions.

First section

Expanded supporting content.

Second section

Additional content.

implemented

Accordion

Groups related sections that can be expanded or collapsed independently.

.he-accordion

implemented

Announcement

Displays a full-width informational or promotional banner.

.he-alert-banner

Contained content

Related information and one clear action.

View details

implemented

Card

Groups related content and optional actions in a contained surface.

.he-card

JavaScript

const state = resolveToken("color.text.primary");

implemented

Code block

Formats code in a labelled, scrollable container with optional actions.

figure + pre + code

Show implementation details

Supporting content appears in document order.

implemented

Disclosure

Toggles one associated region of supporting content.

.he-accordion

Semantic surface

Children inherit an appropriate background and text context.

implemented

Surface

Provides a semantic background and theme context for descendants.

.he-card

Overview panel content.

implemented

Tabs

Switches between related panels within the same page context.

.he-tabs

Explore resourceOne clear destination

implemented

Tile

Presents a selectable or navigational content surface with a single clear target.

.he-card

Request an Element

Search the catalog before proposing a new element. A request documents the unmet need, related elements, anatomy, variants, states, semantics, keyboard behavior, token dependencies, platform mappings, and migration impact.

Elements and Patterns

Use an element for a reusable primitive. Use a pattern when several elements must coordinate to complete a task, preserve a workflow, or communicate a multi-step decision.