Use cards para criar contêineres visuais de conteúdo. Os cards são contêineres flexíveis que podem incluir texto, ícones, imagens e links.

​
Cartão básico

Card title

Veja como usar um cartão com ícone e link. Ao clicar neste cartão, você será levado à página Columns.
Card example
<Card title="Card title" icon="text" href="/components/columns">
  Veja como usar um cartão com ícone e link. Ao clicar neste cartão,
  você será levado à página Columns.
</Card>

​
Variações de cards

Os cards oferecem diversas opções de layout e estilo para atender a diferentes necessidades de conteúdo.

​
Layout horizontal

Adicione a propriedade horizontal para exibir cards em um layout horizontal mais compacto.

Card horizontal

Este é um exemplo de card horizontal.
Exemplo de card horizontal
<Card title="Card horizontal" icon="text" horizontal>
  Este é um exemplo de card horizontal.
</Card>

​
Cartões com imagem

Adicione a propriedade img para exibir uma imagem na parte superior do cartão.
yosemite

Cartão com imagem

Este é um exemplo de cartão com imagem.
Image card example
<Card title="Cartão com imagem" img="/images/card-with-image.png">
  Este é um exemplo de cartão com imagem.
</Card>
Você pode personalizar o texto do call to action e controlar se uma seta aparece. Por padrão, as setas só são exibidas para links externos.

Link card

Este é um exemplo de cartão com ícone e link. Ao clicar neste cartão, você será direcionado para a página Columns.
Link card example
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.
</Card>

​
Agrupando cards

Use o componente Columns para organizar vários cards lado a lado.

Primeiro card

Este é o primeiro card.

Segundo card

Este é o segundo card.
Columns example
<Columns cols={2}>
  <Card title="Primeiro card" icon="panel-left-close">
    Este é o primeiro card.
  </Card>
  <Card title="Segundo card" icon="panel-right-close">
    Este é o segundo card.
  </Card>
</Columns>

​
Propriedades

​
title
string
required
Título exibido no cartão
​
icon
string
O ícone a ser exibido.Opções:
  • nome do ícone do Font Awesome
  • nome do ícone do Lucide
  • código SVG compatível com JSX, entre chaves
  • URL para um ícone hospedado externamente
  • caminho para um arquivo de ícone no seu projeto
Para ícones SVG personalizados:
  1. Converta seu SVG usando o conversor SVGR.
  2. Cole seu código SVG no campo de entrada de SVG.
  3. Copie o elemento completo <svg>...</svg> do campo de saída JSX.
  4. Coloque o código SVG compatível com JSX entre chaves: icon={<svg ...> ... </svg>}.
  5. Ajuste height e width conforme necessário.
​
iconType
string
O estilo do ícone do Font Awesome. Usado apenas com ícones do Font Awesome.Opções: regular, solid, light, thin, sharp-solid, duotone, brands.
​
color
string
Cor do ícone em formato hexadecimal (por exemplo, #FF6B6B).
​
href
string
URL para a qual navegar quando o cartão for clicado.
​
horizontal
boolean
Exibe o cartão em um layout horizontal compacto.
​
img
string
URL ou caminho local para uma imagem exibida na parte superior do cartão.
​
cta
string
Texto personalizado para o botão de ação.
​
arrow
boolean
Mostrar ou ocultar o ícone de seta do link.