Display
Card
A container component for grouped content. Compose with AtlCardHeader, AtlCardContent, and AtlCardFooter.
AtlCardDemo
Live PreviewReact
Elevated Card
Default card with box shadow.
Outlined Card
Card with a visible border.
html
<atl-card variant="elevated" padding="md">
<atl-card-header>Card Title</atl-card-header>
<atl-card-content>
This is the card body content. It can contain anything.
</atl-card-content>
<atl-card-footer>
<atl-button variant="primary" size="sm">Action</atl-button>
</atl-card-footer>
</atl-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.
AtlCardHeader
Title row at the top of the card. Slot-only — takes no props.
AtlCardContent
Main body of the card. Slot-only — takes no props.
AtlCardFooter
Action row at the bottom of the card. Slot-only — takes no props.
Import
ts
import { AtlCard, AtlCardHeader, AtlCardContent, AtlCardFooter } from '@atelier-ui/angular';