Card
Directive for applying Kikita UI card surface styling to semantic container elements.
Import the public directive from the published package entrypoint.
import { KuiCard } 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>Set defaults.card once for the application or for a subtree. Each option resolves as local input > defaults.card.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
card: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | — | Component size. Takes precedence over the global defaults.size. |
| appearance | 'surface' | 'elevated' | 'sunken' | — | Default appearance. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-card-color | CSS custom property | --kui-color-text | Color |
Inputs verified against @kikita-labs/ui v2.0.0 v2.0.0 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'surface' | 'elevated' | 'sunken' | 'surface' | Visual surface treatment: flat surface, elevated shadow, or sunken inset. Falls back to defaults.card.appearance. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Card padding size, mapped to the shared Kikita size scale. An explicit local size wins, then defaults.card.size, then the global defaults.size. |
| 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.
Consumer-visible changes of @kikita-labs/ui 2.0 for Card.
- The class is
KuiCard(it wasKuiCardDirective); the selector and inputs are unchanged.ng update @kikita-labs/uirenames the import. sizeandappearancefall back todefaults.card, then (for the size) the globaldefaults.size.- Card tokens are optional hooks that now take effect on any ancestor; the component no longer sets its public tokens on its own element.