<figure class="c-avatar u-relative u-radius-circle u-overflow-hidden ">
<a href="#">
<img decoding="async" referrerpolicy="no-referrer" class="c-avatar__thumb u-absolute u-left u-bottom u-size-full" src="https://admin.previewtoday.strategy.it/images/test/alberto_berlini.png" loading="lazy" alt="" />
</a>
</figure>
<figure class="c-avatar {% if small %}c-avatar--small{% endif %} {% if regular %}c-avatar--large{% endif %} {% if large %}c-avatar--large{% endif %} u-relative u-radius-circle u-overflow-hidden ">
<a href="#">
<img decoding="async" referrerpolicy="no-referrer" class="c-avatar__thumb u-absolute u-left u-bottom u-size-full" src="{{thumb}}" loading="lazy" alt="{{title}}"/>
</a>
</figure>
{
"thumb": "https://admin.previewtoday.strategy.it/images/test/alberto_berlini.png"
}
.c-avatar {
--story-thumb-size: 4rem;
grid-area: thumb;
width: var(--story-thumb-size);
height: var(--story-thumb-size);
background-color: var(--theme-color);
[data-theme="today"] & {
background-color: #{$category-04};
}
&--small {
--story-thumb-size: 2rem;
}
&--large {
--story-thumb-size: 6rem;
}
&__thumb {
filter: drop-shadow(5px 5px 5px #{$ui-06});
flex: 1 0 auto;
.c-entry & {
margin: 0;
}
}
}
No notes defined.