No notes defined.
<!-- Default -->
<div class=" avatar">
<div class="avatar__container">
<img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
<div class="avatar__name">
Jane Doe
</div>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<!-- Reversed -->
<div class="-reversed avatar">
<div class="avatar__container">
<img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
<div class="avatar__name">
Jane Doe
</div>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
@use "/resources/styles/config";
.avatar {
$b: &;
display: inline-block;
&__container {
display: grid;
grid: "photo name" 1fr "photo title" 1fr;
gap: config.$thin-v-space 0;
}
&__name {
font-size: 1.25rem;
font-weight: bold;
grid-area: name;
padding: 0 config.$thin-h-space;
align-self: end;
}
&__photo {
grid-area: photo;
border-radius: 100%;
align-self: stretch;
}
&__title {
grid-area: title;
padding: 0 config.$thin-h-space;
}
&.-reversed {
#{$b}__container {
grid: "name photo" 1fr "title photo" 1fr;
}
#{$b}__name,
#{$b}__title {
justify-self: end;
}
}
}