Component Names 2.0

What you'll learn

Series
Section
Last Updated
Jun 3, 2026 7:51 PM
Status
Drafting

TL;DR:

Name
Description of the dynamic component
Type
eyebrow
A small label or kicker that sits just above your headline.
Text
quote
A customer testimonial or pull-quote.
Text
attribution
Who the quote is from, with their name and role.
Text
stat-value
A big number or metric you want to stand out, like "95%".
Text
stat-label
The short caption that explains the number.
Text
price
A price or amount.
Text
price-period
The billing period shown next to a price, like "/mo".
Text
location
A venue or place, handy for events.
Text
caption
A small caption beneath an image, or a subtitle on a video.
Text
list-item
A single feature or bullet point. Number them if you have more than one.
Text
step-number
The number on a step in a how-to or guide layout.
Text
disclaimer
Legal text or fine print.
Text
avatar
A headshot, usually for a testimonial or a speaker.
Image
video-clip
A piece of video footage. Number them if you use more than one.
Video
bg-video
A video used as your background.
Video
qr
A QR code.
Image
cta-secondary
A second, lower-priority button.
Text / Fill
form-field
An input field, like an email sign-up box. Number them if multiple.
Text / Fill
swipe-cue
The little "swipe" nudge on a carousel.
Image / Shape
link
A plain text link.
Text
divider
A line or separator between sections.
Shape / Fill
badge
A small pill like "NEW" or "SALE".
Image / Fill
overlay
A shaded layer over an image so your text stays readable.
Fill
progress
Carousel dots or a progress bar.
Shape
frame-border
A decorative border around your design.
Shape
logo-bar
A row of partner or client logos, often a "trusted by" strip.
Image
client-logo
A single partner or client logo. Number them if multiple.
Image
rating
A star or score rating.
Image / Shape

A step-by-step guide