Thumbnail

Uso

O componente "Thumbnail" é usado para exibir imagens ou espaços reservados de forma adaptável em uma aplicação. Pode ser utilizado em diferentes contextos, como galerias de imagens, listagens de produtos ou avatares de usuário.

Anatomia

Fill

1. Thumbnail

• Espaço para adição de imagens relacionadas a radio, normalmente a do artista.

2. Icon

• Ícone referente ao conteúdo que está sendo exibido.

Tonal

1. Container

• Recebe token de cor no fill ou stroke de acordo com o contexto.

2. Icon

• Ícone referente ao conteúdo que está sendo exibido.

Outline

1. Container

• Recebe token de cor no fill ou stroke de acordo com o contexto.

2. Icon

• Ícone referente ao conteúdo que está sendo exibido.

Image

1. Container

• Recebe fill de acordo com o contexto.

2. Thumbail Tools

• O Thumbnail tools é um componente de apoio utilizado para adicionar uma camada acima da imagem para adaptá-la para diferentes cenários: Tempo de vídeo, categorias, adição de play e outros.

Layout responsivo

O componente deve redimensionar-se conforme o tamanho da tela e manter uma proporção adequada da imagem exibida. A variante "Proportional" é especialmente útil para garantir que a imagem aumente proporcionalmente ao tamanho da tela quando o componente estiver aplicado em contextos que possuem variações de tamanho em dispositivos móveis (Ex: Media List, Spotlight...).

Variantes

Skin: Fill, Tonal, Outline

Podem ser utilizadas como placeholder ou para exibir a iconografia referente ao conteúdo. A skin fill pode ser utilizada para representar Mix de artistas, categorias ou do usuário.

Skin: Image

A variante de imagem é utilizada para exibir uma imagem real, thumbnail de vídeos e ou para imagens de categorias e outros.

Proportion Variants

1:1: Utilizada para exibir imagens de artistas, com o mode Circle, e conteúdos como capas de álbuns, singles, EPs e músicas com o mode Square.

16:9: Esta forma é ideal para exibir conteúdos mais longos ou horizontais, como playlists, thumbnails de vídeos e artigos do blog.

Size Variants

Fixed (32px a 104px)

Recomendado para contextos onde o tamanho da imagem deve permanecer fixo e não há necessidade de aumentar conforme o tamanho da tela. deal para uso em listas e componentes onde a exibição da imagem é consistente e não precisa se adaptar dinamicamente ao tamanho da tela.

Proportional

A variante proporcional é útil em contextos onde é necessário que a imagem aumente proporcionalmente ao tamanho da tela, como por exemplo em Media List e Spotlight.

Disclaimer

Para facilitar a utilização do componente de thumbnails, algumas variantes de tamanho foram criadas, mesmo sem estarem aplicadas em nenhum layout atual. São elas:

Fixed:

Proportional:

• 9:16/Tonal

Histórico de Atualizações