Data display

Card

Themed surface container for grouping related content with header, footer, and cover sub-components.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjCardComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

Card title

Themed surface preview

Body content goes here. Cards group related information.

variant

footer align

title

body

header

footer

<kj-card variant="default">
  <kj-card-header>
    <kj-card-title>Card title</kj-card-title>
    <kj-card-subtitle>Themed surface preview</kj-card-subtitle>
  </kj-card-header>
  <kj-card-content>Body content goes here. Cards group related information.</kj-card-content>
  <kj-card-footer align="end">
    <kj-button kjVariant="ghost" kjSize="sm">Cancel</kj-button>
    <kj-button kjSize="sm">Save</kj-button>
  </kj-card-footer>
</kj-card>