html
<div class="avatar">
<img src="https://picsum.photos/100" />
</div>
Components
<div class="avatar">
<img src="https://picsum.photos/100" />
</div>
<div class="avatar">OP</div>
<div class="avatar">
<svg></svg>
</div>
<div class="avatar squared">SQ</div>
<div class="avatar rounded"><img /></div>
<div class="avatar-group">
<div class="avatar">CD</div>
<div class="avatar">AB</div>
</div>
<div class="avatar-group">
<!-- -->
</div>
<div class="avatar-group gap-small">
<!-- -->
</div>
<div class="avatar-group gap-x-small">
<!-- -->
</div>
Type | Modifiers | Default | Description |
---|---|---|---|
Anatomy | & > summary , & > .content , & > .actions | - | Optional wrappers for child content. |
Variants | default, .squared , .rounded | default | The variant to use. |
Type | Modifiers | Default | Description |
---|---|---|---|
Children | Avatar | Avatar | Children |
Spacing | default, .gap-small , .gap-x-small | default | The size to use. |
@layer components.base {
:where(.avatar) {
--_bg-color: var(--color-8);
--_color: var(--text-color-1);
--_width: 40px;
align-items: center;
background-color: var(--_bg-color);
color: var(--_color);
aspect-ratio: 1;
border-radius: 100vmax;
display: inline-flex;
inline-size: var(--_width);
justify-content: center;
overflow: clip;
position: relative;
text-align: center;
text-decoration: none;
&:has(img) {
background-color: transparent;
}
svg {
max-inline-size: var(--size-5);
}
img {
block-size: 100%;
inline-size: 100%;
inset: 0;
object-fit: cover;
position: absolute;
}
&.squared {
border-radius: 0;
}
&.rounded {
border-radius: var(--border-size-3);
}
}
/*
TODO: implement reading-order if that becomes a thing.
https://developer.chrome.com/blog/reading-order/
*/
:where(.avatar-group) {
--_margin: var(--size-1);
display: flex;
flex-direction: row-reverse;
&.gap-small {
--_margin: var(--size-2);
}
&.gap-x-small {
--_margin: var(--size-3);
}
.avatar {
margin-inline-end: calc(-1 * var(--_margin));
outline: 2px solid var(--surface-default);
}
}
}