Card Music Genre
É um componente para recomendação compacta de generos/categorias musicais.
Uso
Este componente é utilizado para exibir uma listagem de subcategorias de um gênero musical principal, de forma compacta.
Seu principal contexto de uso é na tela de um gênero específico (ex: "Rock"), onde o primeiro bloco da tela é dedicado a listar suas subcategorias (ex: "Rock Progressivo", "Punk Rock", "Classic Rock") para facilitar a navegação do usuário.
✅ Do
Utilizar o componente para listar subcategorias ou gêneros relacionados.
❌ Don't
Não utilizar o componente para listar itens de outra natureza (ex: Artistas, Álbuns).
Anatomia
❖. Container
Elemento principal que agrupa a Thumbnail e o Label, servindo como a área de clique geral do componente.
1. Thumbnail
A imagem (thumbnail) é obrigatória, pois representa o artista principal daquele subgênero. O componente não deve ser utilizado se a imagem não estiver disponível.
✅ Do
Utilizar a imagem do artista principal do subgênero.
❌ Don't
Não utilizar o componente sem a imagem (thumbnail).
❌ Don't
Não substituir a thumbnail por um ícone ou ilustração genérica.
2. Label
Comprimento: O texto deve ter um limite máximo de 2 linhas. Se o nome exceder esse limite, deve ser truncado com reticências (...).
Formatação: Nenhuma regra específica de capitalização (Title Case, etc.) é aplicada; o texto deve refletir o dado de origem.
✅ Do
Permitir que o texto quebre em duas linhas se necessário.
❌ Don't
Não forçar o texto a ficar em apenas uma linha (truncando desnecessariamente).
Variantes
Medium
Variante destinada a telas menores (Mobile).
Large
Variante destinada a telas maiores (Desktop).
Posicionamento
O espaçamento entre múltiplos componentes (seja horizontal ou vertical) não é definido pelo componente em si. Ele deve seguir as regras de espaçamento e alinhamento do Grid do layout onde está sendo aplicado.
Layout responsivo
As regras de exibição em breakpoints (como a definição de quantas colunas exibir em Mobile ou Desktop) são contextuais da aplicação e definidas pelo layout, não sendo uma regra interna do componente.
✅ Do
Aplicar o componente seguindo as colunas do Grid do layout, permitindo que o número de colunas se adapte ao breakpoint (ex: 2 colunas no Mobile, 5 colunas no Desktop).
❌ Don't
Não fixar um número de colunas (ex: 3) que ignore o Grid, fazendo com que o layout quebre em telas muito pequenas ou muito grandes.
Comportamento
O componente não possui scroll interno. Se a lista de componentes for maior que a área visível, ela deve ser rolada junto com a página (scroll nativo).
Interação (Clique) O container inteiro do componente funciona como uma área de clique única. Ao ser pressionado, o componente deve navegar o usuário para a página referente ao subgênero selecionado.
✅ Do
Utilizar o clique estritamente para navegação para a página do subgênero.
❌ Don't
Não usar o clique para disparar ações secundárias (ex: tocar música, abrir um menu modal).
Histórico de Atualizações
Atualizado