Thumbnail
Cor única
- Preview
- HTML
- CSS
<!-- tamanho grande -->
<div class="thumbnail">
<span class="thumbnail__item"></span>
</div>
<!-- tamanho médio -->
<div class="thumbnail">
<span class="thumbnail__item md"></span>
</div>
<!-- tamanho pequeno -->
<div class="thumbnail">
<span class="thumbnail__item sm"></span>
</div>
<!-- tamanho extra pequeno -->
<div class="thumbnail">
<span class="thumbnail__item xsm"></span>
</div>
.thumbnail {
display: block;
width: max-content;
}
/* tamanho grande (padrão) */
.thumbnail .thumbnail__item {
display: block;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 999px;
background-color: #68CE8F;
}
/* tamanho médio */
.thumbnail .thumbnail__item.md {
width: 32px;
height: 32px;
}
/* tamanho pequeno */
.thumbnail .thumbnail__item.sm {
width: 24px;
height: 24px;
}
/* tamanho extra pequeno */
.thumbnail .thumbnail__item.xsm {
width: 20px;
height: 20px;
}
Gradiente
- Preview
- HTML
- CSS
<!-- tamanho grande -->
<div class="thumbnail">
<span class="thumbnail__item"></span>
</div>
<!-- tamanho médio -->
<div class="thumbnail">
<span class="thumbnail__item md"></span>
</div>
<!-- tamanho pequeno -->
<div class="thumbnail">
<span class="thumbnail__item sm"></span>
</div>
<!-- tamanho extra pequeno -->
<div class="thumbnail">
<span class="thumbnail__item xsm"></span>
</div>
.thumbnail {
display: block;
width: max-content;
}
/* tamanho grande (padrão) */
.thumbnail .thumbnail__item {
display: block;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 999px;
background: linear-gradient(180deg, #FF3939 0%, #F8E509 100%);
}
/* tamanho médio */
.thumbnail .thumbnail__item.md {
width: 32px;
height: 32px;
}
/* tamanho pequeno */
.thumbnail .thumbnail__item.sm {
width: 24px;
height: 24px;
}
/* tamanho extra pequeno */
.thumbnail .thumbnail__item.xsm {
width: 20px;
height: 20px;
}
Imagem
- Preview
- HTML
- CSS
<!-- Tamanho grande -->
<div class="thumbnail">
<span class="thumbnail__item">
<img src="https://picsum.photos/40" alt="image" title="image">
</span>
</div>
<!-- Tamanho médio -->
<div class="thumbnail">
<span class="thumbnail__item md">
<img src="https://picsum.photos/32" alt="image" title="image">
</span>
</div>
<!-- Tamanho pequeno -->
<div class="thumbnail">
<span class="thumbnail__item sm">
<img src="https://picsum.photos/24" alt="image" title="image">
</span>
</div>
<!-- Tamanho extra pequeno -->
<div class="thumbnail">
<span class="thumbnail__item xsm">
<img src="https://picsum.photos/20" alt="image" title="image">
</span>
</div>
.thumbnail {
display: block;
width: max-content;
}
/* tamanho grande (padrão) */
.thumbnail .thumbnail__item {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 999px;
}
.thumbnail .thumbnail__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* tamanho médio */
.thumbnail .thumbnail__item.md {
width: 32px;
height: 32px;
}
/* tamanho pequeno */
.thumbnail .thumbnail__item.sm {
width: 24px;
height: 24px;
}
/* tamanho extra pequeno */
.thumbnail .thumbnail__item.xsm {
width: 20px;
height: 20px;
}
Ícone
- Preview
- HTML
- CSS
<!-- Tamanho grande -->
<div class="thumbnail">
<span class="thumbnail__item">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00067 3.01932C9.56667 1.61332 11.9867 1.65999 13.4953 3.17132C15.0033 4.68332 15.0553 7.09132 13.6527 8.66199L7.99933 14.3233L2.34733 8.66199C0.944666 7.09132 0.997332 4.67932 2.50467 3.17132C4.01467 1.66199 6.43 1.61132 8.00067 3.01932ZM12.5513 4.11332C11.5513 3.11199 9.938 3.07132 8.89133 4.01132L8.00133 4.80999L7.11067 4.01199C6.06067 3.07065 4.45067 3.11199 3.448 4.11465C2.45467 5.10799 2.40467 6.69799 3.32 7.74865L8 12.436L12.68 7.74932C13.596 6.69799 13.546 5.10999 12.5513 4.11332Z" fill="#434343"/>
</svg>
</span>
</div>
<!-- Tamanho médio -->
<div class="thumbnail">
<span class="thumbnail__item md">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00067 3.01932C9.56667 1.61332 11.9867 1.65999 13.4953 3.17132C15.0033 4.68332 15.0553 7.09132 13.6527 8.66199L7.99933 14.3233L2.34733 8.66199C0.944666 7.09132 0.997332 4.67932 2.50467 3.17132C4.01467 1.66199 6.43 1.61132 8.00067 3.01932ZM12.5513 4.11332C11.5513 3.11199 9.938 3.07132 8.89133 4.01132L8.00133 4.80999L7.11067 4.01199C6.06067 3.07065 4.45067 3.11199 3.448 4.11465C2.45467 5.10799 2.40467 6.69799 3.32 7.74865L8 12.436L12.68 7.74932C13.596 6.69799 13.546 5.10999 12.5513 4.11332Z" fill="#434343"/>
</svg>
</span>
</div>
<!-- Tamanho pequeno -->
<div class="thumbnail">
<span class="thumbnail__item sm">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00067 3.01932C9.56667 1.61332 11.9867 1.65999 13.4953 3.17132C15.0033 4.68332 15.0553 7.09132 13.6527 8.66199L7.99933 14.3233L2.34733 8.66199C0.944666 7.09132 0.997332 4.67932 2.50467 3.17132C4.01467 1.66199 6.43 1.61132 8.00067 3.01932ZM12.5513 4.11332C11.5513 3.11199 9.938 3.07132 8.89133 4.01132L8.00133 4.80999L7.11067 4.01199C6.06067 3.07065 4.45067 3.11199 3.448 4.11465C2.45467 5.10799 2.40467 6.69799 3.32 7.74865L8 12.436L12.68 7.74932C13.596 6.69799 13.546 5.10999 12.5513 4.11332Z" fill="#434343"/>
</svg>
</span>
</div>
<!-- Tamanho extra pequeno -->
<div class="thumbnail">
<span class="thumbnail__item xsm">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00067 3.01932C9.56667 1.61332 11.9867 1.65999 13.4953 3.17132C15.0033 4.68332 15.0553 7.09132 13.6527 8.66199L7.99933 14.3233L2.34733 8.66199C0.944666 7.09132 0.997332 4.67932 2.50467 3.17132C4.01467 1.66199 6.43 1.61132 8.00067 3.01932ZM12.5513 4.11332C11.5513 3.11199 9.938 3.07132 8.89133 4.01132L8.00133 4.80999L7.11067 4.01199C6.06067 3.07065 4.45067 3.11199 3.448 4.11465C2.45467 5.10799 2.40467 6.69799 3.32 7.74865L8 12.436L12.68 7.74932C13.596 6.69799 13.546 5.10999 12.5513 4.11332Z" fill="#434343"/>
</svg>
</span>
</div>
.thumbnail {
display: block;
width: max-content;
}
/* tamanho grande (padrão) */
.thumbnail .thumbnail__item {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 999px;
background-color: #E6E6E6;
}
/* tamanho médio */
.thumbnail .thumbnail__item.md {
width: 32px;
height: 32px;
}
/* tamanho pequeno */
.thumbnail .thumbnail__item.sm {
width: 24px;
height: 24px;
}
/* tamanho extra pequeno */
.thumbnail .thumbnail__item.xsm {
width: 20px;
height: 20px;
}
.thumbnail .thumbnail__item.xsm svg {
width: 12px;
height: 12px;
}