Components
These guides are for interactive pieces you wire with markup and, where noted, wckd-ui.js. Each page has a live demo and copy-ready HTML. For full sections to paste and remix (heroes, shells, cards), use Patterns; for tokens and utilities, use the style guide.
First time here?
Get Started: download and wiring. Style guide: tokens, utilities, and how the pieces fit.
Core components
In the default bundle: the pieces most pages use once core CSS and JS are loaded.
-
The Grid
The Grid first (`.columns` / `.column`); add one wckd-* root when you need scripted behaviour.
Best for: Page shells, composing other patterns, and static markup that later gains interaction.
-
Menu
Responsive site navigation: compact hamburger when links overflow their slot (measured), not a breakpoint you configure.
Best for: Primary navigation, product headers, global marketing nav.
-
Form & input fields
Core styling for input/select/textarea/choice controls plus optional .wckd-form floating labels.
Best for: Contact forms, lead capture, profile edits, and checkout data entry.
-
Buttons
Native button and .button on links: sizes, outline, text, palette fills, disabled, .icon-button (44px default). CSS-only in wckd-ui.css.
Best for: CTAs, forms, toolbars, icon actions, and destructive or semantic actions with swatch classes.
-
Dropdown
Click-triggered action menu using one .wckd-dropdown root with a direct child button and ul.
Best for: Overflow actions, message row controls, and compact toolbar menus.
-
Facepile
Overlapping round portraits (facepile) with hover expand; styling in wckd-ui-components.css.
Best for: Team presence, collaborators, assignees, and compact social proof beside titles or metadata.
-
Animation and scroll effects
Reading progress, scroll direction, and in-view classes on the document, plus optional entrance motion, batched in one place in wckd-ui.js.
Best for: Progress bars, sticky headers, reveal-on-scroll, and hero still zoom without extra scroll listeners.
-
Steps
Progress and step indicators for multi-stage flows and checkouts.
Best for: Checkout, signup, and setup wizards with clear state.
-
Breadcrumbs
Route trail navigation with .breadcrumbs, chevron separators, and clear current-location context.
Best for: Category paths, docs hierarchies, and deep IA orientation.
-
Pagination
Paged controls with .pagination for route-based result lists and index pages.
Best for: Search results, table paging, and long archives split across URLs.
-
Images & media slots
Size scale, background-image slots, aspect boxes, and alignment from wckd-ui.css and wckd-ui-components.css.
Best for: Stills, card art, hero layers, and thumbnail strips before you add overlays or lightboxes.
-
Tooltips
data-tooltip and optional sibling .tooltip-content for lightweight hover and focus tips (CSS-only).
Best for: Glossary terms, icon-only control hints, and non-critical supplementary copy.
Built on the Grid
Optional slices that extend the same `.columns` / `.column` layout contract; add the documented `wckd-*` root when you need behaviour on that row.
-
Accordion
Expand and collapse content rows for FAQs, documentation, and long-form help.
Best for: Help content, pricing FAQ, and dense policy pages.
-
Tabs
Switch between related panels without full page changes, keyboard-friendly and clear focus.
Best for: Feature comparisons, settings, pricing, and in-page tool switching.
-
List filter
Client-side text search, category radios, or both for small lists and card grids without a server round trip.
Best for: Docs indexes, resource libraries, and searchable reference grids.
-
Carousel
Sequential slides with optional navigation, motion, and multiple layout modes.
Best for: Testimonials, logos, feature strips, and hero carousels.
-
Checkers
Alternating text and image rows on a stable grid for editorial and story flows.
Best for: Product stories, brand narratives, and long-form feature pages.
-
Bento
Asymmetric grids for mixed copy, media, and metrics in one composition.
Best for: Editorial home, campaign landings, and launch splash zones.
-
Showcase
Rows that expand on focus or hover to reveal more story without new routes.
Best for: Portfolios, product family overviews, and “choose your path” sections.
-
Slides
Scroll-driven stacked cards for step-by-step or narrative walkthroughs.
Best for: Onboarding, launch stories, and guided product tours.
Other optional components
Optional add-ons (overlays, theme toggle, embeds, and similar) you tick in the package builder or merge by hand.
-
Toast notifications
Transient save/update feedback via window.wckd.toast(...) or data-wckd-toast trigger attributes.
Best for: Saved confirmations, lightweight async success/failure feedback, and non-blocking status updates.
-
Overlay panels
Modals, lightboxes, and grouped overlay flows with focus and scroll management.
Best for: Detail panels, image zoom, and interruptive confirmation flows.
-
Colour theme
Persisted light and dark themes on the document root. One primary control by id, or any number of triggers marked with data-wckd-theme-toggle.
Best for: Respecting user palette choice without shipping separate light and dark static sites.
-
Image comparison
Before/after or A–B image reveal with a draggable or fixed divider.
Best for: Redesign proof, product upgrades, and visual transformation stories.
-
Collapsible toggle
“Read more” and inline disclosure using wckd-toggle, open-toggle, and wckdCollapsibleToggles.
Best for: Long intros, spec tables, and progressive disclosure without a modal.
-
Table of contents
Auto-builds an in-page outline from #main into #toc with active-link tracking (wckdToc).
Best for: Long docs, policies, and API reference pages in a two-column layout.
-
Slot machine
Vertical flip through inline phrases in a headline: data-speed interval, optional data-loop false to stop on the last line.
Best for: Marketing heroes, rotating qualifiers beside one keyword, and playful emphasis without swapping whole headings.
-
YouTube Embed (Optimised)
Deferred, performance-oriented YouTube embeds with consent-friendly loading.
Best for: Tutorials, walkthroughs, and marketing video on content pages.