Card Song ticker
Um container de exibição que agrupa e apresenta os botões de navegação para as músicas atualmente em alta no site.
Uso
Usado primariamente para destacar e fornecer acesso rápido às músicas em tendência (trending) no site, geralmente posicionado em locais de alta visibilidade como a Home ou telas de descoberta musical.
Anatomia
❖. Container
Agrupamento dos elementos do componente. Este container não possui interação de clique; a interatividade está restrita aos elementos internos (Button group).
1. Icon
Slot para aplicação de icone de forma contextual a necessidade do momento
Elemento opcional.
2. Title
Slot de texto para colocar um titulo que for contextual e necessário no momento da aplicação
Elemento obrigatório.
Se o texto do título for muito longo, ele deve quebrar a linha (embora casos de texto extenso sejam raros para este componente).
3. Button group
Grupo de componente de Duo label Button, que seriam as musicas em alta agrupadas
Elemento obrigatório. O card não deve ser renderizado se não houver músicas em alta para exibir.
O grupo de botões é desenhado para exceder o espaço do container (a partir de 2+ itens), ativando um scroll horizontal permanente.
Variantes
Vertical
Usada quando o componente é aplicado em áreas verticalmente restritas. O Icon e o Title são posicionados lado a lado, e o Button group é posicionado abaixo deste conjunto, mantendo o scroll horizontal.
Horizontal
O Icon, Title e Button group são posicionados lado a lado (horizontalmente).
Layout responsivo
O componente utiliza um scroll horizontal permanente no Button group (como definido na Anatomia). Isso garante que ele funcione de forma consistente tanto em Desktop quanto em viewports menores (Mobile) sem quebrar o layout.
Histórico de Atualizações
Atualizado