Card

Componente de card flexível com suporte a header, conteúdo e footer.

Basic Card

Card Title

This is a card description

Card content goes here.

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@mt/design-system'

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>This is a card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-mt-text-muted">
      Card content goes here.
    </p>
  </CardContent>
</Card>

Card with Footer

Confirm Action

Are you sure you want to continue?

This action cannot be undone.

<Card>
  <CardHeader>
    <CardTitle>Confirm Action</CardTitle>
    <CardDescription>Are you sure you want to continue?</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-mt-text-muted">
      This action cannot be undone.
    </p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button variant="primary">Confirm</Button>
  </CardFooter>
</Card>

Elevated Card

Card with shadow elevation

<Card variant="elevated">
  <CardHeader>
    <CardTitle>Elevated Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-mt-text-muted">
      Card with shadow elevation
    </p>
  </CardContent>
</Card>

Card with Glow

Glowing Card

Card with primary glow effect

<Card withGlow>
  <CardHeader>
    <CardTitle>Glowing Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-mt-text-muted">
      Card with primary glow effect
    </p>
  </CardContent>
</Card>

Card Props

Prop	Type	Default	Description
`variant`	`'default' \| 'elevated' \| 'glass'`	`'default'`	Visual style variant of the card
`withGlow`	`boolean`	`false`	Adds glow effect to the card
`withHover`	`boolean`	`true`	Adds hover scale effect
`children`	`ReactNode`	-	Card content

Sub-components

O Card possui os seguintes sub-componentes para estruturação do conteúdo:

•CardHeader - Cabeçalho do card
•CardTitle - Título do card
•CardDescription - Descrição do card
•CardContent - Conteúdo principal
•CardFooter - Rodapé com ações