--- title: Cartão description: >- Aprenda a usar o componente Card para criar contêineres estilizados e clicáveis com ícones, imagens, links e CTAs em layouts de grade. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. O componente `` é 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 `` para criar layouts de grade. As capturas de tela mostram a interface em inglês. ## Uso ```mdx Launch your docs in minutes. ``` ## Cartão básico Um cartão simples com título: Configure seu primeiro projeto em menos de cinco minutos. ```mdx Set up your first project in under five minutes. ``` ## Cartão com ícone Adicione um ícone para tornar os cartões mais distintos visualmente: Explore nossa documentação completa para conhecer todos os recursos. ```mdx Explore our complete documentation to learn all features. ``` ## Cartão com link Os cartões podem direcionar para outras páginas: Consulte a documentação completa da API. ```mdx View the complete API documentation. ``` ## 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: Confira o código-fonte e contribua. ```mdx Check out the source code and contribute. ``` Links externos mostram a seta automaticamente: Este cartão direciona para um site externo. ```mdx This card links to an external site. ``` ## Cartão com CTA Adicione um texto de chamada para ação abaixo do conteúdo do cartão: Desbloqueie recursos avançados e suporte prioritário. ```mdx Unlock advanced features and priority support. ``` Combine a seta e a CTA para dar o máximo de destaque: Tudo o que você precisa para iniciar seu primeiro projeto. ```mdx Everything you need to launch your first project. ``` ## Cartão com imagem Exiba uma imagem na parte superior do cartão: Um cartão com cabeçalho de imagem. ```mdx A card featuring an image header. ``` ## Grade de cartões com Columns Use `Columns` para organizar vários cartões em uma grade responsiva: Comece a usar em poucos minutos. Percursos de aprendizagem passo a passo. Exemplos de código do mundo real. ```mdx Get up and running in minutes. Step-by-step learning paths. Real-world code examples. ``` ### Layout de três colunas Documentação Referência da API Atualizações recentes ```mdx Documentation API Reference Latest updates ``` ## 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](/pt/content/icons). 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. ## O que vem a seguir? Navegue por todos os componentes disponíveis Aprenda a usar componentes em MDX