Component

Jump to:

Download & setup

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

When to use

Use when your markup matches the examples on this page.
Add spacing and surfaces with style guide utilities after the component shell works.
Resize to a narrow viewport: many components reflow (stack, compact nav, accordion tabs).

Load wckd-ui.css, wckd-ui-components.css, and the Get Started bootstrap for wckd-ui.js when this pattern needs JS.
Keep the documented class names and DOM shape so window.WCKD_BOOTSTRAP / window.WCKD_COMPONENTS initialise the right module.
Re-test keyboard, focus, and one narrow viewport after custom CSS or extra interactive children.