MoleculesCard

Card

@velon-finance/ui · status: stable · molecule

A surface that groups related content. Composed of atoms (border, radius, shadow, typography) and itself composable into organisms like BalanceCard or TransactionRow.

Overview

Saldo disponível
Atualizado agora
$ 12,847.23

Anatomy

A card composes 5 sub-parts. Use whichever you need; none are required.

PartUse
<CardHeader>Top region. titles and descriptions live here
<CardTitle>Primary heading (h3-equivalent)
<CardDescription>Subtitle / caption
<CardContent>Main body
<CardFooter>Actions or metadata

Code

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter,
} from '@velon-finance/ui'
 
<Card>
  <CardHeader>
    <CardTitle>Saldo disponível</CardTitle>
    <CardDescription>Atualizado agora</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>
TooltipAlert