COMPONENT

Card

Container for grouped content with optional header, footer, and hover state.

Default

Resumo Mensal

Outubro 2024

R$ 4.280,00 em contribuicoes de 23 membros ativos.

<Card>
  <CardHeader>
    <div>
      <CardTitle>Resumo Mensal</CardTitle>
      <CardDescription>Outubro 2024</CardDescription>
    </div>
  </CardHeader>
  <p>R$ 4.280,00 em contribuicoes</p>
  <CardFooter>
    <Button variant="ghost" size="sm">Ver detalhes</Button>
  </CardFooter>
</Card>

Padding Variants

padding=sm

padding=md (default)

padding=lg

Hoverable

Clickable Card

Hover to see the shadow transition.

API Reference

Prop	Type	Default	Description
hoverable	boolean	false	Adds hover shadow transition
padding	"none" \| "sm" \| "md" \| "lg"	"md"	Internal padding
children*	ReactNode	—	Card content

React Native

On mobile, the hoverable prop does not exist. Instead, pass onPress to make the card tappable — it wraps the card in a Pressable with opacity feedback.

Mobile usage

import { Card, CardTitle } from "@/components/mobile";

// Static card
<Card padding="md">
  <CardTitle>Resumo</CardTitle>
</Card>

// Tappable card
<Card onPress={() => navigate("/details")} padding="sm">
  <CardTitle>Tap me</CardTitle>
</Card>