Como ele é
Pense numa marmita japonesa vista de cima, com divisórias de tamanhos diferentes. A grade tem uma coluna no celular e três a partir de telas médias, com linhas de 288 pixels de altura, e cada bloco pode ocupar mais de uma coluna ou linha. Os blocos são cartões brancos de cantos arredondados com sombra leve; no escuro, ficam pretos com borda fina clara. No bloco simples, a sombra cresce e o texto desliza um pouco para a direita no hover. No cartão com fundo, o texto sobe, o ícone encolhe e um link com seta aparece embaixo, subindo e ganhando opacidade.
Você pode estar procurando isto se pediu algo assim
- seção de funcionalidades em blocos de tamanhos diferentes
- grade de cards tipo site da Apple mostrando os recursos
- layout em mosaico para apresentar meus serviços
- aqueles quadrados grandes e pequenos lado a lado na landing page
- organizar os benefícios do produto num grid bonito
- cards com imagem que mostram um link quando passo o mouse
- deixar a página de recursos com cara de SaaS moderno
Também chamado de
- seção em blocos
- grade bento
- layout bento
- bento box layout
- grid de recursos
- features grid
- mosaico de cards
Quando usar
- Seção de funcionalidades de SaaS ou de aplicativo
- Resumo de serviços de agência, consultoria ou estúdio
- Página de produto que mistura imagens, números e textos curtos
- Portfólio com destaques de tamanhos diferentes
Quando evitar
- Conteúdo longo dentro de cada bloco, já que as linhas têm altura fixa a partir de telas médias
- Links importantes apenas no cartão com fundo, já que a chamada fica invisível até o hover
Como pedir para a sua IA
Crie uma seção de recursos em grade bento na página inicial: cartões de tamanhos variados, uma coluna no celular e três no desktop, efeitos leves no hover, link de chamada visível também no foco do teclado, cores do meu projeto e versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Escaninho
Como fica Escaninho no celular?
No celular, Escaninho vira uma coluna única, com os cartões empilhados; a partir de telas médias, passa a ter três colunas e linhas de 288 pixels. Como não existe hover em telas de toque, o link de chamada do cartão com fundo pode ficar escondido, então peça à IA que o deixe sempre visível nesses aparelhos.
Dá para escolher o tamanho de cada bloco de Escaninho?
Sim. Escaninho é uma grade CSS, e cada bloco recebe classes do Tailwind para ocupar mais colunas ou linhas, como col-span-2 para um destaque largo. A demonstração alterna blocos de uma e de duas colunas e também mostra uma montagem com cartões altos que atravessam três linhas.
Escaninho funciona com teclado?
Em parte. Os blocos de Escaninho são estáticos, e só o cartão com fundo tem um link, que o Tab alcança. Esse link fica transparente até o hover e o foco não o revela, então peça à IA que o mostre também no foco, com focus-visible, para quem navega sem mouse.
