Patterns
Patterns are an inspiration gallery for what is possible out of the box with WCKD UI CSS. Use a pattern as a starting point, an end point, or a variant reference. Open a pattern below to preview, view source, or copy HTML.
Guide coming means planned, not a broken link.
How to use patterns
Style guide: tokens and rules. Components: interactive markup. Contact for builds or support.
-
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