Anatomy

Masthead

aka App Bar, Header

The topmost bar containing logo, navigation, and global actions.

Hero

A large prominent section — usually the first thing visible — designed to convey the primary message.

Eyebrow

Small text above a headline that categorizes or contextualizes the content below.

Kicker

A short, bold label above or below a headline — often the section name or topic.

Subhead

aka Subtitle, Deck

Secondary text below a headline that elaborates on or qualifies the main title.

Lede

aka Lead

The opening paragraph of body copy — slightly larger or bolder to draw the reader in.

Breadcrumb

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

Sidebar

aka Rail

A vertical panel alongside the main content, used for navigation, filters, or supplementary info.

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

aka Banner, Announcement Bar

A thin bar fixed to the top or bottom of the viewport for alerts, promos, or cookie consent.

Above the Fold

Everything visible without scrolling. Named after newspaper layout where the physical fold hid the bottom half.

Gutter

The gap between columns in a grid layout.

Bleed

aka Full Bleed

Content that extends edge-to-edge, breaking out of the page's normal content width.

Card

A contained surface grouping related information — typically an image, title, and description.

Chip

aka 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

Small text below an image or figure that describes or credits it.

Byline

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

Pullquote

A highlighted excerpt from the body text, displayed larger to draw attention and break up long reads.

Callout

aka Admonition, Alert

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

Divider

aka Rule, Separator

A horizontal line separating sections of content.

Figure

An image, diagram, or code block paired with a caption — semantically grouped as one unit.

Empty State

What's shown when a view has no data — typically an illustration, message, and action button.

Skeleton

aka Shimmer, Placeholder

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

Nav Bar

aka 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

aka Progress Steps, Wizard

Connected steps showing progress through a multi-stage process.

Hamburger Menu

A three-line icon that toggles a hidden navigation menu, commonly used on mobile.

Mega Menu

A large dropdown panel showing categorized navigation links — often with images or featured content.

Command Palette

aka Spotlight, Omnibar

A keyboard-activated search overlay for quickly finding and executing actions.

Label

Text that identifies a form field — placed above or beside the input.

Placeholder

Faded hint text inside an input that disappears on focus. Not a substitute for a label.

Helper Text

Small text below a field that provides guidance, validation, or 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

aka Legend

A bordered group of related fields with a label (legend) that breaks the top border.

Toggle

aka Switch

A sliding control for binary on/off choices — provides immediate feedback unlike a checkbox.

Combobox

aka Autocomplete

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

Toast

aka Snackbar

A brief, auto-dismissing message that slides in — usually at the bottom — to confirm an action.

Modal

aka Dialog

A centered overlay that demands attention, dimming the background until the user responds.

Drawer

aka 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 tiny dark label that appears on hover to explain an icon or truncated text.

Progress Bar

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

Spinner

aka Loading Indicator

A rotating circle that signals an indeterminate wait.

Accordion

aka Disclosure, Collapsible

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

Carousel

aka Slider, Swiper

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

FAB

aka Floating Action Button

A prominent circular button — usually bottom-right — for the page's primary action.

CTA

aka Call to Action

The most visually prominent button on a page, designed to drive the user toward a key action.

Dropdown

aka Select Menu

A button that reveals a floating list of options when clicked.