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.

Figma

---

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

Figma	Gitbook	Android	iOS	Web
24/09/2025	05/11/2025			Ver na tabela

Atualizações por data

Novembro 2025

05/11/2025

• Documentação do novo componente

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

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