Spotlight

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

Histórico de Atualizações