Everything on a webpage, named.
A visual vocabulary so you can point at things and we both know what we mean. Boxes show each element in context; cards below explain what it does, what else it's called, and when you'd use it.
Every box is a named thing.
A simplified page layout with each element wrapped in a labeled box. Colors group elements by category (structure, type, interactive, component, spacing).
Quiet Harbor
A practice in Cedar Park.
Mercer & Co.
An executive coach.
Fieldnote
A strategy firm.
Names, aliases, and when to use them.
Each card matches a numbered element above. Includes the proper term, common aliases we'd use in a meeting, a definition, and what it's typically used for.
Header / Navbar
Also: top nav, nav bar, site header, masthead
The horizontal strip at the top of every page. Holds the brand, navigation, and a primary call-to-action. Usually sticky so it stays visible as you scroll.
Brand Lockup
Also: logo, wordmark, logotype, brand mark + wordmark
The clickable brand name that takes you home. "Lockup" means the fixed arrangement of wordmark + (optional) logomark + (optional) tagline.
Nav Links
Also: primary nav, top nav items, menu items
The inline list of text links inside the header. The currently-active page gets a visual indicator (underline, color, bold, or active state).
CTA Button
Also: call-to-action, primary button, nav CTA
A styled-out button in the header that's visually different from nav links. Usually the single most important action on the whole site (book, contact, buy).
Hero Section
Also: hero, above-the-fold, splash, banner
The first section you see on landing. Job: earn the next scroll in under three seconds. Usually has eyebrow + headline + lede + buttons.
Eyebrow
Also: kicker, overline, supra-label, category label
A small label that sits above the main headline. Usually uppercase with tight letter-spacing. Signals category or context before the headline hits.
Headline · H1
Also: hero headline, title, H1 (semantic)
The single biggest piece of text on the page. Always an <h1> semantically. One per page. Answers "what is this?" in under 10 words if possible.
Lede / Dek
Also: subtitle, deck, standfirst, subhead
The paragraph right under the headline. Expands on the promise with one or two sentences. Journalism borrowed "lede" and "dek" from print — "lede" is the opening paragraph, "dek" is the subheadline.
Button Row
Also: CTA pair, primary/secondary buttons, action bar
Two (rarely three) buttons side-by-side under the lede. The left one is primary (filled), the right is secondary (outline or ghost). Primary gets the action you most want; secondary is the escape valve.
Section / Band
Also: content section, slab, strip
A horizontal block that spans the full page width. Each section has a single job (hero, features, testimonials, CTA band). Alternating backgrounds visually separate them.
Grid
Also: card grid, tile grid, column grid
A layout pattern that arranges items in equal-width columns with consistent gaps. Responsive: 3 columns on desktop, 2 on tablet, 1 on mobile.
Card
Also: tile, panel, block
A rectangular container that groups related information with a border (or background) around it. Holds an image, title, description, and sometimes a link.
Tag / Chip / Pill
Also: badge, label, category tag
A small rounded element containing one word or short phrase. Used to label or categorize. Usually colored.
Footer
Also: site footer, colophon
The dark (usually) band at the very bottom of every page. Holds secondary navigation, legal links, contact info, and the copyright line. Dense on purpose — it's the "everything else" zone.
Container / Max-Width
Also: wrapper, content container, max-width wrapper
An invisible box that constrains content width (typically 1200px) and centers it horizontally. Prevents text from stretching edge-to-edge on big monitors.
Whitespace / Negative Space
Also: breathing room, padding, margin, gutters
Empty space around elements. Not "waste" — it's the primary tool for visual hierarchy. More whitespace = more expensive-feeling.
Active State
Also: current page indicator, selected state
The visual difference that shows which nav link is the page you're currently on. Underline, bold text, color change, or background fill.
Hover State
Also: hover effect, pointer state
How something changes when you move your cursor over it. A subtle cue that an element is clickable. Color change, underline, scale, shadow.
Sticky / Fixed Header
Also: pinned nav, persistent header
A header that stays visible at the top of the screen even when you scroll. "Sticky" = stays until you scroll past a point; "fixed" = always there.
Body Copy
Also: body text, paragraph, running text
The main paragraph text of a page (not headlines). Typically 16–19px, optimized for readability. "Copy" is a publishing-era word — all text that isn't a title or label is copy.
Drop Cap
Also: initial letter, illuminated letter
An oversized first letter of a paragraph, styled editorially. Traditional for long-form articles. Signals "this is an essay, settle in."
Pull Quote
Also: block quote, highlighted quote
A quoted sentence pulled from the body text, styled larger and often with an accent border or color. Gives the eye a break; creates visual rhythm.
Breadcrumb
Also: breadcrumbs, path, location trail
A horizontal trail of links showing where you are in the site hierarchy. "Home › Services › Coaching" — lets users go up one level.
Modal / Dialog
Also: modal window, overlay, dialog box, popup
A floating panel that appears over the page, typically with the background dimmed. Demands attention — use sparingly. "Modal" means it blocks interaction with everything behind it.
Drawer / Slide-over
Also: sidebar panel, off-canvas, flyout
A panel that slides in from the edge of the screen. Less obtrusive than a modal; used for detail views, filters, or settings.