Card
Directive for applying Kikita UI card surface styling to semantic container elements.
Import the public directive from the published package entrypoint.
import { KuiCardDirective } from '@kikita-labs/ui';kuiCard is an attribute directive. Apply it to a real semantic element: article, section, aside, button, or a, depending on behavior.
Default surface
Grouped content with Kikita border, radius, and surface tokens.
<article kuiCard>
<h3>Default surface</h3>
<p>Grouped content with Kikita border, radius, and surface tokens.</p>
</article>appearance controls the surface treatment: flat surface, elevated shadow, or sunken inset. Defaults to surface.
Surface
Default flat card surface.
Elevated
Raised shadow for content that floats above the page.
Sunken
Inset surface for nested or secondary content.
<article kuiCard appearance="surface">
<h3>Surface</h3>
<p>Default flat card surface.</p>
</article>
<article kuiCard appearance="elevated">
<h3>Elevated</h3>
<p>Raised shadow for content that floats above the page.</p>
</article>
<article kuiCard appearance="sunken">
<h3>Sunken</h3>
<p>Inset surface for nested or secondary content.</p>
</article>size maps to the shared Kikita size scale and controls card padding. Defaults to md.
Extra small
Small
Medium
Large
<article kuiCard size="xs">
<h3>Extra small</h3>
</article>
<article kuiCard size="sm">
<h3>Small</h3>
</article>
<article kuiCard size="md">
<h3>Medium</h3>
</article>
<article kuiCard size="lg">
<h3>Large</h3>
</article>interactive adds hover and focus-visible affordances. Use a real interactive host element (button or a) so keyboard and click behavior stay native.
<button kuiCard interactive type="button" class="card-interactive-example__button">
<h3>Interactive card</h3>
<p>Hover and focus-visible affordances for a clickable card surface.</p>
</button>
<a kuiCard interactive href="https://kikita.dev" class="card-interactive-example__button">
<h3>Linked card</h3>
<p>Anchor host keeps native link semantics and keyboard behavior.</p>
</a>Inputs verified against @kikita-labs/ui v1.6.1 v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'surface' | 'elevated' | 'sunken' | 'surface' | Visual surface treatment: flat surface, elevated shadow, or sunken inset. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Card padding size, mapped to the shared Kikita size scale. |
| interactive | boolean | false | Enables hover and focus-visible affordances for clickable cards. Does not add semantics or keyboard behavior; choose an interactive host element (button, a) for that. |
Card is a styling-only directive; it does not add or replace element semantics.
kuiCardapplies visual treatment only. Choose the host element for its native semantics:article/section/asidefor static grouped content,buttonorafor a clickable card.interactiveonly changes hover and focus-visible styling. It does not add a role, keyboard handler, or click behavior, so the host element must already provide those (a realbuttonor anawith a validhref).- Keep a real heading element inside the card for the card's accessible structure instead of relying on visual styling alone.