Patterns
Patterns are paste-ready HTML built with the same utilities and components as production. Open a pattern to view the live layout, then copy from the page or match the structure in your templates.
Planned cards in the list below are labelled Guide coming; they are placeholders, not broken links.
Where to go next
Style guide: tokens and the Grid. Components: interactive markup contracts.
-
Hero
Above-the-fold lead layouts out of the box: split with rail, centered on media, and two-column.
Best for: Home, campaign, and launch pages where the first section carries the story and primary action.
-
Page shell
Stable frame from the kit: header, main, optional aside, and footer around your content.
Best for: Documentation, app screens, and long-form pages where the scaffold stays put and body content swaps.
-
Cards
Blog, profile, and feature cards out of the box, built with core WCKD UI CSS.
Best for: Feeds, team areas, and marketing blocks where the same card shape repeats.
-
FAQ
Accordion-style questions with optional lead-in.
Best for: Objections, pricing, and pre-sales support blocks on marketing pages.
Guide coming
-
Social proof rail
Logos, quotes, and metrics in a horizontal strip. Pair with the carousel and showcase components when you need motion or depth.
Best for: Trust and proof in a horizontal strip beside or above a CTA.
Guide coming
-
Comparison
Plan or before/after. Pair with tabs or image comparison for interactive reveals.
Best for: Plan choice, upgrades, and before or after stories on conversion pages.
Guide coming
-
Guided flow
Steps plus narrative. Pair with the steps and slides components for long-form flows.
Best for: Onboarding and setup journeys that need steps plus narrative.
Guide coming