Bloco
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.
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
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=msxgcgs8" alt="Tabs" />
</Tile>Bloco básico
Um bloco simples com imagem de prévia e título:
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=msxgcgs8" alt="Tabs" />
</Tile>Bloco com descrição
Adicione uma descrição para fornecer mais contexto:
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=msxgcgs8" alt="Tabs" />
</Tile>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:
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=msxgcgs8" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=msxgcgs8" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>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.