# Prateleira Uma fileira de cartões altos com foto que rola para o lado e abre cada cartão num painel por cima da página. > Prateleira é um componente do THM Componentes que lembra as vitrines da App Store: uma fileira de cartões altos com foto, categoria e título que rola para o lado. As imagens saem do desfoque ao carregar e, ao clicar, o cartão se abre num painel sobre a página. Serve para cases, serviços e módulos de curso. - 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, Motion for Vue - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/prateleira/ ## Como ele é Lembra as vitrines de destaque da loja de apps da Apple. Uma fileira de cartões altos, de cantos bem arredondados, rola para o lado sem barra de rolagem visível, e duas setas redondas, embaixo à direita, avançam ou voltam. Cada cartão tem uma foto que preenche tudo, um degradê escuro no topo e, em branco, a categoria e o título. As fotos chegam desfocadas e ganham nitidez quando carregam, e os cartões entram subindo um após o outro. Ao clicar, o cartão se expande num painel, branco no modo claro e quase preto no escuro, sobre a página escurecida e desfocada. ## Você pode estar procurando isto se pediu algo assim - “cards grandes com foto que deslizam para o lado, tipo site da Apple” - “carrossel de cases que abre os detalhes quando clico no card” - “vitrine de serviços com cartões altos e setas para passar” - “mostrar os módulos do curso em cards que abrem uma página por cima” - “aquele carrossel da App Store com cards de foto e título” - “galeria horizontal de projetos para o portfólio com efeito de expandir” ## Também chamado de carrossel de cards, card carousel, carrossel de cards expansíveis, carrossel horizontal, expandable cards, cards com modal, horizontal scroll cards ## Quando usar - Vitrine de cases, projetos ou serviços em landing page - Módulos de curso com uma página de detalhes por módulo - Seção de novidades ou lançamentos de produto - Portfólio em que cada projeto abre num painel com texto e imagens ## Quando evitar - Conteúdo que precisa abrir pelo teclado, sem antes pedir à IA cartões focáveis - Itens para comparar lado a lado, que ficam escondidos na rolagem lateral ## Como pedir para a sua IA ```text Crie um carrossel de cartões para os cases da minha landing: cartões altos com foto, categoria e título, rolagem lateral com setas, imagem que sai do desfoque ao carregar e painel expandido ao clicar, com cartões focáveis pelo teclado, Esc para fechar 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 Prateleira ### Prateleira funciona no celular? Sim. No celular, a fileira de Prateleira rola com o dedo, os cartões ficam menores e o toque abre o painel expandido. O painel fecha pelo botão, com um toque fora dele ou com Esc, e a página de trás não rola enquanto ele está aberto. O prompt do THM Componentes pede teste em mobile e comparação de LCP e INP. ### O que posso colocar dentro do cartão aberto? Qualquer conteúdo. Em Prateleira, o que você coloca dentro de cada cartão aparece no corpo do painel expandido, abaixo da categoria e do título: parágrafos, imagens, vídeos ou outros componentes. Os dados do cartão fechado são só três, imagem, título e categoria. ### Prateleira respeita quem prefere menos movimento? O componente original anima sempre: entrada dos cartões, abertura do painel e rolagem suave. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Prateleira significa cartões já no lugar e painel abrindo sem transição. ## Componentes relacionados - [Translado](https://vibecode.thmtecnologia.com/componentes/translado/): Você clica num card da galeria e a foto e o título crescem suavemente até virar a página de detalhe. - [Persiana](https://vibecode.thmtecnologia.com/componentes/persiana/): Fotos lado a lado em faixas verticais; a que está sob o mouse se alarga e as outras se estreitam. - [Cartomante](https://vibecode.thmtecnologia.com/componentes/cartomante/): Leque de fotos altas atrás de um título grande: cada foto se revela no hover e o título fica vazado no meio. - [Fotograma](https://vibecode.thmtecnologia.com/componentes/fotograma/): Uma foto grande por vez, que sai deslizando e dá lugar à próxima, crescendo a partir do centro. - [Coreto](https://vibecode.thmtecnologia.com/componentes/coreto/): Fotos dispostas em roda, como num cilindro, que você gira arrastando, com inércia e reflexo no chão. --- 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.