Card

Layout
v1.0.0
stable

A flexible container component for grouping related content.

Variants

Premium Features

Unlock the full potential of your workspace

✓Unlimited projects and team members
✓Advanced analytics and reporting
✓Priority support and updates
$29/month
default

Team Collaboration

Work together seamlessly with your team

✓Real-time collaboration tools
✓Shared workspaces and files
✓Team activity dashboard
Free
outline
npx inam-ui add card

Usage Examples

Pricing Card

Card with header, features list, and action button

<Card>
  <CardHeader>
    <CardTitle>Premium Features</CardTitle>
    <CardDescription>Unlock the full potential</CardDescription>
  </CardHeader>
  <CardContent>
    <ul className="space-y-2">
      <li>✓ Unlimited projects</li>
      <li>✓ Advanced analytics</li>
      <li>✓ Priority support</li>
    </ul>
  </CardContent>
  <CardFooter>
    <span className="text-sm">$29/month</span>
    <Button>Get Started</Button>
  </CardFooter>
</Card>

Outline Card with Custom Padding

Card with outline variant and larger padding

<Card variant="outline" padding="lg">
  <CardHeader>
    <CardTitle>Team Collaboration</CardTitle>
    <CardDescription>Work together seamlessly</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Real-time collaboration tools for your team.</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Learn More</Button>
  </CardFooter>
</Card>

Accessibility

Screen Reader

Use appropriate heading structure within cards for better navigation.

Props

NameTypeDefaultDescription
variant'default' | 'outline''default'Visual style variant.
padding'none' | 'sm' | 'md' | 'lg''md'Internal padding size.
children*React.ReactNode—Card content.

Related Components

Alert
Button
Checkbox