Card
A card is a flexible container used to group related information and actions into a single, structured unit. It helps organize content in a clear and visually distinct way, making it easier for users to scan and interact with.
'use client'; import { Button, Card } from 'sdaia-ui'; export default function CardRealWorld() {Installation
npx sdaia-ui@latest add card
Usage
1<Card className="w-full max-w-[400px]">2<Card.Content3leadingItem={4<Card.LeadingItem type="featured-icon" featuredIconVariant="outline" />5}6label="Label"7helperText="Helper Text"8showCheckbox={false}9/>10<Card.Footer type="actions">11<Button variant="primary">Action</Button>12<Button variant="neutral">Action</Button>13</Card.Footer>14</Card>
Examples
Standard
The default alert style with a subtle background.
<Card> <Card.Header contentLayout="inline" leadingItem={<Card.LeadingItem type="avatar" avatar={{ size: 'xl' }} />} label="Label"Default
A general-purpose card for displaying content.
<Card> <Card.Content leadingItem={ <Card.LeadingItem type="featured-icon" featuredIconVariant="outline" /> }Content
Card designed for rich text and descriptive content.
<Card> <Card.Header contentLayout="inline" leadingItem={<Card.LeadingItem type="avatar" avatar={{ size: 'xl' }} />} label="Label"Product
Product card with image, title, price, and an action button.
<Card> <Card.Media type="image" imageSrc="..." imageAlt="Product" stretched hideLeadingIcon /> <Card.Content leadingItem={null} label="Label" helperText="Helper Text" showCheckbox={false} /> <Card.Footer type="actions"> <Button variant="primary" fullWidth>Add to Card</Button>Item
Compact item card suited for list-style layouts.
<Card> <Card.Header contentLayout="separated" leadingItem={<Card.LeadingItem type="featured-icon" />} label="Label"Event
Event card showing the date, title, and location.
<Card> <Card.Media type="image" imageSrc="..." imageAlt="Event" hideLeadingIcon /> <Card.Content leadingItem={null} label="Event Name"Social Post
Social post card with avatar, content, and engagement actions.
<Card> <Card.Header contentLayout="inline" leadingItem={<Card.LeadingItem type="avatar" avatar={{ size: 'xl' }} />} label="Label"Task
Task card for to-do and project management views.
<Card> <Card.Header contentLayout="inline" leadingItem={<Card.LeadingItem type="featured-icon" />} helperText="UX/UI Designer"Media Stretched
Card with a media area that stretches to the full card width.
API Reference
CardProps
Props for the Card component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
direction | 'ltr' | 'rtl' | deprecated | optional |
