Card Most Played Tracks

O componente é um card genérico para listagem de músicas em formato compacto. Embora seu nome (Card Most Played Tracks) cite um exemplo específico, ele pode ser utilizado em diversos contextos, como "


Uso

Contexto de Aplicação O componente é usado em contextos que listam músicas, como "Últimas músicas acessadas" ou "Músicas mais acessadas".

Quantidade A quantidade de cards exibidos depende do contexto de implementação e da necessidade de layout, não havendo regras fixas.


Anatomia

❖. Container

  • Definição: É o elemento principal que agrupa e delimita todos os outros elementos do componente (Thumbnail, Song name, Artist name).

  • Interação (Clique): O componente inteiro funciona como uma área clicável (hitbox) que direciona o usuário para a página ou player da respectiva música.

1. Thumbnail

  • Slot de imagem destinado à imagem do artista.

  • Fallback: Se a imagem do artista não puder ser carregada ou estiver indisponível, deve ser exibido um ícone ou visual de fallback padrão de artista.

2. Song name

  • Truncamento: O texto deve ser limitado a uma única linha. Caso o conteúdo exceda o espaço disponível (que é fluido, dependendo da largura da tela), deve ser aplicado o truncamento (ellipsis).

  • Obrigatoriedade: Este campo é obrigatório. Não é possível exibir o card sem o nome da música.

3. Artist name

  • Truncamento: O texto deve ser limitado a uma única linha. Caso o conteúdo exceda o espaço disponível, deve ser aplicado o truncamento (ellipsis).

  • Obrigatoriedade: Este campo é obrigatório. Não é possível exibir o card sem o nome do artista.


Histórico de Atualizações

Figma
Gitbook
Android
iOS
Web

24/09/2025

04/11/2025

chevron-rightAtualizações por datahashtag

Novembro 2025

04/11/2025

  • Documentação do novo componente

circle-info

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuiçãoarrow-up-right — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.

Atualizado