Cards

Título do Cartão

É assim que você usa um cartão com um ícone e um link. Clicar neste cartão leva você à página Columns.

Card Example

<Card title="Click on me" icon="text" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

Cartão horizontal

Adicione uma propriedade horizontal para exibir cartões horizontalmente.

Cartão Horizontal

Aqui está um exemplo de um cartão horizontal

Cartão de imagem

Adicione uma propriedade img para exibir uma imagem no topo do cartão.

Cartão de Imagem

Aqui está um exemplo de um cartão com uma imagem

Cartão de link

Você pode personalizar o CTA e se deseja ou não exibir a seta no cartão. Por padrão, a seta só será exibida para links externos.

Cartão de link

É assim que você usa um cartão com um ícone e um link. Clicar neste cartão leva você à página Columns.

Clique aqui

Card Example

<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

Agrupando cartões

Você pode agrupar cartões em columns.

Primeiro Cartão

Este é o primeiro cartão.

Segundo Cartão

Este é o segundo cartão.

Props

title · string · required

O título do cartão

icon · string or svg

Um ícone Font Awesome icon, Lucide icon, ou código SVG em icon={}

iconType · string

Um dos seguintes: regular, solid, light, thin, sharp-solid, duotone, brands

color · string

A cor do ícone como um código hexadecimal

href · string

A URL para onde o clique no cartão navegará o usuário

horizontal · boolean

Torna o cartão mais compacto e horizontal

img · string

A URL ou caminho local para uma imagem a ser exibida no topo do cartão

cta · string

Rótulo para o botão de ação

arrow · boolean

Ativa ou desativa o ícone de seta do link