Spotlight

Card para a exibição de conteúdos em destaque do site

Figma

---

Uso

O componente tem como objetivo chamar a atenção dos usuários para conteúdos importantes ou promocionais.

---

Anatomia

1. Description (Opcional)

• Recebe como conteúdo texto complementar ao conteúdo do componente.

2. Thumbnail

• Recebe imagem relacionada ao conteúdo do card.

3. Container label

• Container label é um componente com variações a depender do contexto de uso. Recebe informações que apresentam/complementam os conteúdos exibidos na Thumbnail.

---

Variantes

Thumb Rectangle

Para artigos do blog, aulas e cursos e conteúdos curados.

Thumb Square

Para recomendações de álbuns, conteúdos mais ouvidos pelo usuário e rádios.

---

Posicionamento

No layout, o componente "Spotlight" deve ser posicionado de forma a maximizar sua visibilidade e impacto visual. Quando múltiplos "Spotlights" são utilizados juntos, eles devem ser alinhados horizontalmente. Se for necessário exibir mais de um "Spotlight" em uma mesma linha, eles devem ocupar todo o espaço disponível no grid, aumentando proporcionalmente de acordo com a largura do grid.

---

Use Cases

Single

Carousel

Genres and Moods

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
02/12/2024	02/12/2024			Ver na tabela

Atualizações por data

Dezembro de 2024

02/12/2024

Abril de 2024

27/11/2024

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.