---
title: Bloco
description: Os blocos exibem prévias de conteúdo com fundo padronizado e uma área de imagem em destaque. Use-os para integrações, modelos ou galerias visuais.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Os blocos exibem prévias com imagens em destaque e fundos padronizados. Use-os em vez de Cards quando uma captura de tela ou um logotipo for mais importante que o texto: páginas de integração, galerias de modelos e páginas com muitas imagens.
As capturas de tela mostram a interface em inglês.
Use blocos quando:
- **As prévias visuais** forem mais importantes que as descrições em texto
- **Apresentar integrações** com logotipos ou capturas de tela
- **Criar galerias** de modelos, temas ou exemplos
- **Exibir capturas de tela** com títulos e descrições opcionais
## Uso
```mdx
```
## Bloco básico
Um bloco simples com imagem de prévia e título:
```mdx
```
## Bloco com descrição
Adicione uma descrição para fornecer mais contexto:
```mdx
```
## Bloco ou Card
| Recurso | Bloco | Card |
|---------|------|------|
| Ênfase visual | Imagem em destaque com fundo padronizado | Ícone + título + descrição |
| Melhor para | Integrações, modelos e galerias | Navegação, listas de recursos e CTAs |
| Tratamento de imagens | Área ampla de prévia | Ícone pequeno |
| Conteúdo de texto | Título + descrição opcional | Título + descrição + ícone |
**Regra geral:** se você tiver uma captura de tela ou um logotipo para exibir, use um bloco. Se o conteúdo for principalmente textual, use um Card.
## Layout em grade
Use `Columns` para exibir vários blocos em uma grade:
## Imagens no modo escuro
Use classes do Tailwind para exibir imagens diferentes nos modos claro e escuro:
```mdx
```
O atributo `noStyle` impede o estilo padrão das imagens para que as classes do modo escuro funcionem corretamente.
## Propriedades
O URL para o qual o bloco direciona. Aceita caminhos internos (`/docs/intro`) e URLs externas (`https://example.com`). Os links externos são abertos em uma nova aba.
Texto do título exibido abaixo da área de prévia.
Texto de descrição opcional abaixo do título.
Conteúdo a ser exibido na área de prévia. Normalmente, imagens ou SVGs.
## O que vem a seguir?
Navegue por todos os componentes disponíveis
Saiba como usar componentes em MDX