Thumbnail

O componente "Thumbnail" é utilizado para exibir imagens ou espaços reservados de forma eficiente e adaptável em diferentes aplicação

Figma

---

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:

.	Image	Fill	Tonal	Outline
1:1	72px	72px	72px	72px
16:9	80px, 72px, 48px	80px, 72px, 48px	80px, 72px, 48px	80px, 72px, 48px

Proportional:

• 9:16/Tonal

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
06/05/2025	06/05/2025			Ver na tabela

Atualizações por data

Novembro de 2024

27/11/2024

Março de 2024

27/11/2024

Maio de 2025

06/05/2025

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.