Componentes

Carousel

Lista horizontal de cards com scroll e peek. Usado para seções de conteúdo relacionado dentro de uma tela — não substitui uma lista vertical completa.

Visão geral

Animals

Pink Floyd · 1977 · Rock Progressivo

Do mesmo artista Ver tudo

The Wall

1979

Wish You Were Here

1975

Meddle

1971

Atom Heart Mother

1970

↑ Arraste o carousel para testar o scroll horizontal

Anatomia

Detalhes

Faixas

Cabeçalho de seção

Título da seção à esquerda · link "Ver tudo" à direita quando há mais de 6 itens · font-size:14px font-weight:700

Card de item

Largura fixa · capa quadrada com rounded-xl · título + metadado abaixo · scroll-snap-align:start

Peek (affordance)

Último card visível recortado pela borda — indica que há mais conteúdo à direita sem precisar de indicadores explícitos

Label do card

Título em 12px/600 · subtítulo em 11px #888 · máx 2 linhas truncadas com line-clamp-2

Variantes

Cover — Quadrado

Capas de álbuns, wantlist, discos do mesmo artista. Largura fixa de 120px.

The Wall

Pink Floyd · 1979

Wish You Were Here

Pink Floyd · 1975

Animals

Pink Floyd · 1977

Meddle

Pink Floyd · 1971

Uso

Discos do mesmo artista, coleção de amigo, wantlist, recomendações.

Card width

w-[120px] · capa 120×120px rounded-xl

Avatar — Circular

Amigos, seguidores, "quem também tem este disco". Avatar circular com nome abaixo.

roberto.v

anna.d

carlos.m

lucia.r

mais

Uso

Amigos que têm o mesmo disco, seguidores de um perfil, sugestões de quem seguir.

Card width

w-[72px] · avatar 64×64px rounded-full

Gênero — Wide

Cards mais largos com cor de fundo representando o gênero musical.

Rock

Jazz

MPB

Soul

Uso

Filtro de gênero na busca, explorar por estilo.

Card size

140×72px · card retangular sem imagem de capa

Do / Don't

Do mesmo artista

FaçaUse para conteúdo relacionado (max ~10 itens) com um título claro. Peek indica que há mais.

Sua coleção completa (532 discos)

EviteNão use carousel para exibir coleções grandes ou feeds principais — use lista vertical paginada. Carousel é para contexto, não para conteúdo primário.

Do mesmo artista Ver tudo

FaçaSempre inclua um título de seção. "Ver tudo" quando há mais itens do que cabem.

EviteCarousel sem título deixa o usuário sem contexto — o que são esses cards? De onde vieram?

Specs

Propriedade	Cover	Avatar	Gênero
Card width	`120px`	`72px`	`140px`
Imagem height	`120px`	`64px`	`72px`
Border radius	`rounded-xl` (10px)	`rounded-full`	`rounded-xl`
Gap entre cards	`gap-[10px]`
Padding início	`pl-4` (16px) — alinhado com o restante da página
Padding fim	`pr-4` no último card
Scroll	`overflow-x-auto scrollbar-none scroll-snap-type-x-mandatory`
Snap	`scroll-snap-align:start` em cada card
Label	`12px/600 #f5f5f5` · truncar com `line-clamp-2`
Subtitle	`11px #888`
Max itens sem "Ver tudo"	6 itens — acima disso, adicionar link "Ver tudo"