Cartão
Aprenda a usar o componente Card para criar contêineres estilizados e clicáveis com ícones, imagens, links e CTAs em layouts de grade.
O componente <Card> é um contêiner estilizado e clicável. Use-o para criar links para outras páginas ou agrupar conteúdo relacionado. Combine cartões com <Columns> para criar layouts de grade.
As capturas de tela mostram a interface em inglês.
Uso
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Cartão básico
Um cartão simples com título:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Cartão com ícone
Adicione um ícone para tornar os cartões mais distintos visualmente:
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Cartão com link
Os cartões podem direcionar para outras páginas:
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Cartão com seta
Adicione um indicador de seta para mostrar que o cartão direciona para algum lugar. As setas aparecem automaticamente em links externos, mas você também pode ativá-las para links internos:
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>Links externos mostram a seta automaticamente:
<Card title="External Resource" href="https://example.com">
This card links to an external site.
</Card>Cartão com CTA
Adicione um texto de chamada para ação abaixo do conteúdo do cartão:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Combine a seta e a CTA para dar o máximo de destaque:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Cartão com imagem
Exiba uma imagem na parte superior do cartão:
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=msxgcgs8">
A card featuring an image header.
</Card>Grade de cartões com Columns
Use Columns para organizar vários cartões em uma grade responsiva:
<Columns cols={2}>
<Card title="Quickstart" icon="rocket" href="/quickstart">
Get up and running in minutes.
</Card>
<Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
Step-by-step learning paths.
</Card>
<Card title="Examples" icon="flask" href="/components/overview">
Real-world code examples.
</Card>
</Columns>Layout de três colunas
<Columns cols={3}>
<Card title="Docs" icon="book">
Documentation
</Card>
<Card title="API" icon="code">
API Reference
</Card>
<Card title="Blog" icon="newspaper">
Latest updates
</Card>
</Columns>Propriedades
O título exibido na parte superior do cartão.
Nome do ícone do Font Awesome (por exemplo, "book", "code", "rocket"). Por padrão, é renderizado na variante Solid; adicione um prefixo de estilo, como light/book, para alterar o peso. Consulte Ícones.
URL para a qual o cartão direciona. Pode ser interna (/docs/intro) ou externa (https://example.com).
Caminho para uma imagem exibida na parte superior do cartão.
Exibe um indicador de seta (↗) no canto superior direito. É ativado automaticamente para links externos (URLs que começam com http:// ou https://). Defina como true para exibi-lo em links internos ou como false para ocultá-lo em links externos.
Texto personalizado de chamada para ação exibido abaixo do conteúdo do cartão. Só fica visível quando href também é fornecido.
Propriedades de Columns
Número de colunas na grade. Aceita 1, 2, 3 ou 4.