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

avatar

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
avatar
.f-avatar-small Reduces the size of the avatar
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