Display
Card
A container component for grouped content. Compose with LlmCardHeader, LlmCardContent, and LlmCardFooter.
LlmCardDemo
Live PreviewReact
Elevated Card
Default card with box shadow.
Outlined Card
Card with a visible border.
html
<llm-card variant="elevated" padding="md">
<llm-card-header>Card Title</llm-card-header>
<llm-card-content>
This is the card body content. It can contain anything.
</llm-card-content>
<llm-card-footer>
<llm-button variant="primary" size="sm">Action</llm-button>
</llm-card-footer>
</llm-card>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'elevated' | 'outlined' | 'flat' | 'elevated' | Visual style of the card |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Padding size inside the card |
role | 'article' | 'region' | 'section' | — | Opt-in landmark role. Default is no role (plain div). Use article for self-contained content, region for a perceivable area (pair with aria-label), section for HTML <section> semantics. |
Composition parts
Card is composed from the parts below. Each part is its own component — drop the ones you don't need.
LlmCardHeader
Title row at the top of the card. Slot-only — takes no props.
LlmCardContent
Main body of the card. Slot-only — takes no props.
LlmCardFooter
Action row at the bottom of the card. Slot-only — takes no props.
Import
ts
import { LlmCard, LlmCardHeader, LlmCardContent, LlmCardFooter } from '@atelier-ui/angular';