Display

Card

A container component for grouped content. Compose with LlmCardHeader, LlmCardContent, and LlmCardFooter.

LlmCard

Demo

Elevated Card

Default card with box shadow and no border.

Outlined Card

Card with a visible border and no shadow.

<LlmCard variant="elevated" padding="md">
  <LlmCardHeader>Card Title</LlmCardHeader>
  <LlmCardContent>
    This is the card body content. It can contain anything.
  </LlmCardContent>
  <LlmCardFooter>
    <LlmButton variant="primary" size="sm">Action</LlmButton>
  </LlmCardFooter>
</LlmCard>

API

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

Import

import { LlmCard, LlmCardHeader, LlmCardContent, LlmCardFooter } from '@atelier-ui/react';