Interface anatomy

Masthead

Also called: App bar, Header

A header containing the logo, navigation, and global actions.

Hero

A prominent introduction that presents the page's primary message.

Eyebrow

Short text that categorizes or contextualizes a headline.

Kicker

A short label associated with a headline, often a section name or topic.

Subhead

Also called: Subtitle, Deck

Supporting text that elaborates on or qualifies a headline.

Lede

Also called: Lead

The opening paragraph of an article or page.

Breadcrumb

A trail of links showing the current page's position in the site hierarchy.

Sidebar

Also called: Rail

A panel alongside the main content for navigation, filters, or supporting information.

Footer

The bottom section of a page containing links, legal text, or secondary navigation.

Skip link

A hidden link (visible on focus) that lets keyboard users jump past navigation to the main content.

Sticky bar

Also called: Banner, Announcement bar

A bar fixed to a viewport edge for announcements, alerts, or consent controls.

Above the fold

The page area visible before scrolling. Its height depends on the viewport.

Gutter

The gap between columns in a grid layout.

Bleed

Also called: Full bleed

Content that extends beyond the usual page margins.

Card

A surface that groups related information, such as an image, title, and description.

Chip

Also called: Tag, Badge, Pill

A small, rounded label used for categories, filters, or status indicators.

Avatar

A circular image or icon representing a user or entity.

Thumbnail

A small preview image that links to or represents larger content.

Caption

Text that describes or credits an image or figure.

Byline

A line identifying the author, usually with their avatar, name, and publication date.

Pullquote

An excerpt displayed separately from the body text for emphasis.

Callout

Also called: Admonition, Alert

A boxed message with a colored border or icon that warns, informs, or highlights something.

Divider

Also called: Rule, Separator

A horizontal line separating sections of content.

Figure

An image, diagram, or code block grouped with a caption.

Empty state

A message and optional action shown when a view has no data.

Skeleton

Also called: Shimmer, Placeholder

Pulsing gray shapes that mimic the layout of content while it loads.

Nav bar

Also called: Navigation bar

A horizontal row of links for primary site navigation, usually inside the masthead.

Tab bar

A row of tabs that switch between views or sections within a single page.

Breadcrumb trail

A path of links showing hierarchy: Home > Section > Page.

Pagination

Numbered page controls for navigating through large sets of results.

Stepper

Also called: Progress steps, Wizard

Connected steps showing progress through a multi-stage process.

Navigation menu button

An icon button that opens or closes navigation, commonly used on mobile devices.

Mega menu

A dropdown panel that groups navigation links by category.

Command palette

Also called: Spotlight, Omnibar

A searchable overlay for finding and running commands.

Label

Text that identifies a form field.

Placeholder

Hint text inside an empty input. A placeholder does not replace a label.

Helper text

Text associated with a field that provides guidance, validation, or a character count.

Floating label

A label that starts inside the input and animates to the top border when the field is focused or filled.

Fieldset

Also called: Legend

A labeled group of related form controls.

Toggle

Also called: Switch

A control that changes a setting between two states, such as on and off.

Combobox

Also called: Autocomplete

An input that combines free typing with a filtered dropdown of suggestions.

Toast

Also called: Snackbar

A temporary status message that confirms an action.

Modal

Also called: Dialog

A dialog that blocks interaction with the surrounding page until closed.

Drawer

Also called: Sheet, Panel

A panel that slides in from the edge of the screen for secondary content or actions.

Popover

A floating box anchored to a trigger element, containing interactive content like menus or forms.

Tooltip

A non-interactive hint that appears on focus or pointer interaction.

Progress bar

A horizontal track that fills to indicate how much of a task is complete.

Spinner

Also called: Loading indicator

A rotating circle that signals an indeterminate wait.

Accordion

Also called: Disclosure, Collapsible

Stacked sections that expand and collapse to show or hide content.

Carousel

Also called: Slider, Swiper

A horizontal strip of items that scrolls or animates between panels.

Floating action button

Also called: FAB

A floating button for the page's primary action.

Call to action

Also called: CTA

A link or button for the primary action.

Dropdown

Also called: Select menu

A control that opens a list of options.