Avatar
Sizes
W
Small
WT
Default
WT
Large
WT
Extra Large
WT
Extreme Extra Large
<div class="avatar -small">W</div>
<div class="avatar">WT</div>
<div class="avatar -large">WT</div>
<div class="avatar -xlarge">WT</div>
<div class="avatar -xxlarge">WT</div>
Notice:
Small avatars should only have one initial.
Square Shape
Use class .-square to turn default rounded avatar into square avatar.
W
Small
WT
Default
WT
Large
WT
Extra Large
WT
Extreme Extra Large
<div class="avatar -square -small">W</div>
<div class="avatar -square">WT</div>
<div class="avatar -square -large">WT</div>
<div class="avatar -square -xlarge">WT</div>
<div class="avatar -square -xxlarge">WT</div>
With nameholder
W
Will Taylor (You)
WT
Will Taylor (You)
Product Designer
WT
Will Taylor (You)
Product Designer
WT
Will Taylor (You)
Product Designer
WT
Will Taylor (You)
Product Designer
<div class="avatar-block">
<div class="avatar">WT</div>
<div class="nameholder">
<div class="title">Will Taylor (You)</div>
<div class="description small">Product Designer</div>
</div>
</div>
Notice:
When placed inside an .avatar-block, you can specify the size of an avatar by adding it next to the class .avatar
If using .small as the size of your avatar, you should only have .name (without .role)
With Profile Photo
Small
Default
Large
Extra Large
Extreme Extra Large
<div class="avatar -small"><img src="your cat's selfie"/></div>
<div class="avatar"><img src="your cat's selfie"/></div>
<div class="avatar -large"><img src="your cat's selfie"/></div>
<div class="avatar -xlarge"><img src="your cat's selfie"/></div>
<div class="avatar -xxlarge"><img src="your cat's selfie"/></div>
Notice:
Square photos are best displayed in an avatar.
Related mixin
@mixin avatar-size-generator($size, $font-size) {
@include size($size);
font-size: $font-size;
line-height: $size;
min-width: $size;
}
This mixin takes in the $size for the avatar and its appropriate $font-size then spit out the correct styling for each size of the avatar. Also, the line-height will take the size of the avatar as well to make sure things are vertically aligned center.