Thumbnail Tools

O Thumbnail Tools é um componente complementar que adiciona informações e interatividade a thumbnail

Figma

---

Uso

O Thumbnail Tools é usado para enriquecer os thumbnails com informações adicionais e interações. Ele é aplicado em cenários onde é necessário mostrar elementos como botões de ações, indicadores de progresso, ícones de curtida, índices de posição ou contadores de tempo diretamente sobre o thumbnail.

---

Anatomia

❖. Container

• É a estrutura base do componente e recebe a aplicação de BG de acordo com a variante definida.

1. Slots (Opcionais)

• Os slots permitem personalizar os elementos exibidos dentro do componente, como ícones, botões ou indicadores.

---

Variantes

Clear

Use essa variante quando o thumbnail não precisar de um fundo adicional, mantendo a transparência total.

Hover

A variante Hover é indicada quando você quer mostrar ações ou informações extras apenas no momento de interação do usuário.

Overlay

Use a variante Overlay quando for necessário adicionar um fundo semi transparente para destacar informações.

---

Use Cases

Brand Tag

Check

Index

List Hover

List Like

Play Video

Progress

Timer Count

Hover

---

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

• Criação do 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.