# Escaninho Seção dividida em blocos de tamanhos diferentes, como uma marmita japonesa, para apresentar recursos ou serviços. > Escaninho é um componente do THM Componentes que organiza uma seção em cartões de tamanhos variados, no estilo das marmitas japonesas com divisórias. Traz dois tipos de bloco: um simples, com cabeçalho, ícone, título e descrição, e um cartão com área de fundo livre e um link que surge no hover. Serve para apresentar recursos e serviços. - Categoria: Cartões e superfícies - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/escaninho/ ## 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 ```text 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. ## Componentes relacionados - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. - [Girassol](https://vibecode.thmtecnologia.com/componentes/girassol/): Quando o mouse chega perto de um card, um arco de luz colorida acende na borda e gira para apontar o cursor. - [Cortiça](https://vibecode.thmtecnologia.com/componentes/cortica/): Fotos de alturas diferentes encaixadas em colunas, com filtros por categoria que reorganizam tudo com animação. - [Pavio](https://vibecode.thmtecnologia.com/componentes/pavio/): Cartão com um feixe de luz que dá voltas pela borda e um brilho suave que acompanha o mouse por dentro. - [Biruta](https://vibecode.thmtecnologia.com/componentes/biruta/): Card de foto que mostra um texto por cima no hover e desliza a imagem conforme o lado por onde o cursor entrou. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.