Composition
Atoms
The small pieces that make up Wireframe Deck patterns and the larger components. Use them on their own, combine them, or grab their CSS class as a starting point. Everything here already lives in wireframe.css or kit-components.html. This page just surfaces it at the atom level.
Labels & dividers
Section label
.lbl
Mono label with an optional trailing rule. Use inside cards or above small content blocks.
Section label with rule
.section-label
Larger labelled-rule. Used between page sections (Design System, Page Wireframes, etc.).
Tags
Tag
.tag
Solid ink fill. Default tag.
Tag
.tag.outline
Outlined on white. Quieter, for dense rows.
One
Two
Three
Four
.tag-cloud
Flex-wrap container with built-in gap. Use to lay out a set of tags.
List items
Feature name
One-line description of what this feature does.
Icon + label · one cell of
text-icon-list-wideFA icon stacked above a
.title-tight heading and a short paragraph. Repeat in a grid for the full pattern.
Single checklist item with a brief description of the thing being checked off.
Checklist row · one cell of
text-checklistGreen check + a single line of supporting text. Stack 4–16 of these per column.
Single pricing feature line that belongs inside a plan card.
.pricing-feat
Accent check + a short line of plan feature copy. Use
.pricing-feat.green for the upgrade variant.- One list item
- Another list item
Bulleted list ·
<ul> / <li>Plain HTML. Spacing handled by
wireframe.css defaults. No list class needed.Stats
2,847
12.4% vs. last month
Total revenue
.stat-number + .stat-trend + .stat-label
The trio you'd put inside a
.stat-tile on a dashboard hero.128
Active
.stat-tile.sm + .stat-number.sm
Compact bordered tile. Stack 3–4 in a row for a quick KPI strip.
$49
/mo
.price-amount
Plan price display. Pair with
.price-period for the small period text below.Attribution
Jamie Chen
Product Designer, Acme Co.
.attr-name + .attr-role
Avatar + name + role. The atomic unit for testimonial footers and author bylines.
Co-founder & CEO
Sam Patel
.role + heading
Mono role label stacked above a name. Use on team grids and bio cards.
Quotes & ratings
"
.test-card .quote-mark
Oversized serif quote mark. Sits above the quote body in a testimonial card.
.star-row
Flex row of star icons with 3px gap. Use for ratings, review counts, and product summaries.
Product meta
One-line product description sits below the title row.
.product-card-meta
Title + price baseline. Use as the header of a product card body, then add description and CTA below.
1:24 / 4:30
.video-controls
Dark control strip with play, progress, and timestamp. Sits below a
.ph.video or video embed.Logo mark
[Client Name]
.logo + .mark
Circle mark + wordmark. Replace with the client's mark in the design phase.
.mark alone
Just the circle. Use in dense headers, mobile chrome, and tile thumbnails.
From components — navigation atoms
Breadcrumb trio · link · separator · current
Last item is the current page. No link, slightly darker, weight 500. Separator is a chevron in
--mute.Tab underline indicator
Active tab:
--ink text + 2px --accent bottom border with margin-bottom: -1px to overlap the row border.Pagination cell
32px min-width bordered box. Active cell fills with
--accent, white text. Ellipsis is unbordered.From components — interaction atoms
2
3
Stepper circle · complete · active · future
30px circle. Complete: accent + check icon. Active: accent + number. Future: outlined, muted number.
Closed accordion row
Open accordion row
Accordion row · closed + open
Open state swaps to
--paper background and flips the chevron. The expanded body sits below this row in the full pattern.Drop files here
PNG, JPG, PDF · UP TO 10MB
File drop-zone
Dashed border on
--paper. Cloud icon + label + format hint. Pair with a hidden input[type=file] in real builds.From components — feedback atoms
Toast: single row. Stack 1–3 in the corner of the viewport.
Saved successfully
Your changes are now live.
Toast: success
Heads up
Action required before continuing.
Toast: warning
Something went wrong
Please try again or contact support.
Toast: error
Alert / banner: full-width strip. Sits at the top of the page above content.
New feature. See the release notes.
Alert: info
Maintenance. Saturday 2–4am PT.
Alert: warning
Failed. Unable to reach the server.
Alert: error
From components — footer atoms
Footer column · one of four
Mono uppercase label + stacked links. Repeat 3–4 of these inside the multi-column footer pattern in More Components.
Social icon row
Inline cluster of FA
fa-brands icons on a dark surface. Set color: var(--paper) on the icons so they pop against the ink background.Looking for the full composed pieces (full nav bars, full footer, modal/dialog, full pagination set, full stepper sequence, cookie banner)? Those live in More Components ↗.