Components
The component catalog is for interactive building blocks you wire into pages: menus, accordions, tabs, carousels, overlays, filters, and more. Open a guide for a live demo, copy-paste HTML, and notes on structure, accessibility, and runtime hooks. Use the Patterns inspiration gallery when you want static sections to remix (preview, view source, or copy HTML by section id).
First time here?
Get Started: download and wiring. Style guide: tokens, utilities, and how the pieces fit.
Core components
Ship in the main component CSS and JS. Most full-kit pages use these.
-
The Grid
The Grid first (`.columns` / `.column`); add one wckd- root when you need scripted behavior.
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.
-
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
Extra CSS in wckd-ui-kit/components on the same `.columns` / `.column` contract as the rest of the kit. Page shell (`.wckd-page`, header, main, aside, footer) is separate. Each doc shows the one wckd- root to add.
-
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
More optional CSS in wckd-ui-kit/components: overlays, theme toggle, slot machine, embeds, and similar.
-
Overlays
Modals, lightboxes, and grouped overlay flows with focus and scroll management.
Best for · Detail panels, image zoom, and interruptive confirmation flows.
-
Color 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 (Optimized)
Deferred, performance-oriented YouTube embeds with consent-friendly loading.
Best for · Tutorials, walkthroughs, and marketing video on content pages.