Padrões

List Item

Linha de lista com capa, texto e meta. Usado em Listas, Gênero → Discos, Notificações e Buscar. Sempre ocupa 100% da largura e empilha com divide-y divide-[#1a1a1a].

Anatomia

Coleção
1

Kind of Blue

Miles Davis

1959

2
3
★ 5

Thriller

Michael Jackson

1982

4
A

ale_faria começou a te seguir

2 min atrás

1

Bloco de texto

flex-1 min-width:0. Título font-semibold truncate. Artista e meta em text-[#888] text-xs.

2

Capa (thumbnail)

w-12 h-12 rounded-lg object-cover flex-shrink-0. Sempre à direita via order ou flex-row-reverse.

3

Badge de nota

absolute bottom-1.5 left-1.5 bg-black/70. Mesmo padrão do Card de Álbum. Aparece só se há avaliação.

4

Avatar de usuário

w-9 h-9 rounded-full flex-shrink-0. Substituição da capa em itens de notificação e seguidores.

Variantes

Álbum

Capa à direita (12×12). Título bold, artista e meta (ano · contagem) em cinza.

The Dark Side of the Moon

Pink Floyd

1973 · 12 pessoas têm

Kind of Blue

Miles Davis

1959

Aquele álbum sem capa

Artista Desconhecido

♪

Container

w-full flex items-center gap-3 px-4 py-3 text-left active:bg-[#111] transition

Texto (flex-1)

título: text-[#f5f5f5] font-semibold text-sm line-clamp-1 artista: text-[#888] text-xs mt-0.5 meta: text-[#888] text-xs mt-0.5

Capa

w-12 h-12 rounded-lg object-cover flex-shrink-0

Placeholder

w-12 h-12 rounded-lg bg-[#1a1a1a] flex items-center justify-center text-[#888] text-xl

Separador

divide-y divide-[#1a1a1a] (no container pai)

Com avaliação

Badge de nota no canto inferior esquerdo da capa. Mesmo padrão do card de álbum.

Thriller

Michael Jackson

1982

★ 5

Rumours

Fleetwood Mac

1977

★ 4.5

Badge de nota

absolute bottom-1.5 left-1.5 bg-black/70 backdrop-blur-sm rounded px-1.5 py-0.5 text-[#C8F53C] text-[10px] font-bold

Usuário

Avatar à esquerda (36×36). Usado em Notificações, Seguidores e Amigos.

A

ale_faria curtiu seu disco

2 min atrás

M

mateus_vinyl começou a te seguir

1h atrás

Avatar

w-9 h-9 rounded-full flex-shrink-0

Texto

font-size: 13px · line-height: 1.4 username: font-weight: 600 meta: text-[#888] text-[11px] mt-1

Ação secundária

px-3.5 py-1.5 rounded-full border border-[#333] text-[#f5f5f5] text-xs font-semibold

Do / Don't

The Dark Side of the Moon

Pink Floyd · 1973

Do Capa à direita. Texto no lado esquerdo, ocupando flex-1 com truncate. Touch target mínimo de 48px de altura.

Animals

Pink Floyd · 1977

Don't Não ponha a capa à esquerda em list items de álbum. O padrão DiSco é capa à direita — quebrar isso cria inconsistência visual entre telas.
button w-full flex items-center gap-3
px-4 py-3 text-left
active:bg-[#111] transition
Do Use <button> com text-left. O elemento é semânticamente correto e o active:bg-[#111] dá feedback tátil.
div onClick={...} flex items-center
gap-3 px-4 py-3
Don't Não use <div onClick> para itens clicáveis. Quebra acessibilidade (foco de teclado, leitores de tela) e não tem estado active.