MoléculasCard

Card

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

Uma superfície que agrupa conteúdo relacionado. Composta por átomos (border, radius, shadow, tipografia) e, por sua vez, combinável em organisms como BalanceCard ou TransactionRow.

Visão geral

Saldo disponível
Atualizado agora
$ 12,847.23

Anatomia

Um card compõe 5 subpartes. Use as que precisar; nenhuma é obrigatória.

ParteUso
<CardHeader>Região superior. títulos e descrições ficam aqui
<CardTitle>Título principal (equivalente a h3)
<CardDescription>Subtítulo / legenda
<CardContent>Corpo principal
<CardFooter>Ações ou metadados

Código

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