Avatar
Create a circular avatar for displaying a profile picture or text.
Usage
To apply this component, add the .f-avatar
class to an element. Within the element add a square image, or add the text modifier class to use text instead.
The image will be centered and images larger than the avatar will be scaled down.
NOTE You can combine any of the modifiers outlined below.
Example
Markup
<div class="f-avatar">
<img src="https://unsplash.it/36?image=1027" alt="avatar">
</div>
Size modifiers
There are 2 size modifiers available. Just add one of the following classes to change the size.
Example | Class | Description |
---|---|---|
.f-avatar-small |
Reduces the size of the avatar | |
.f-avatar-large |
Increases the size of the avatar |
Text modifier
Add the .f-avatar-text
class to use text instead of an image. For example: initials, or an icon.
Examples
JC
person