Avatars

Sizing - Images

Adjust the w-{size} and h-{size} classes according to your desired dimensions.

image image image image image
Rounded Circle

Use utility class .rounded-full.

image image image image image
Sizing - Background Color

you can use utility classes like .bg-{color} for the background color and .text-{color} for the text color.

CT
CT
CT
CT
CT
Rounded Circle Background

you can use utility classes like .rounded-full.

CT
CT
CT
CT
CT
Images Shapes

Avatars with different sizes and shapes.

.rounded

.rounded

.rounded-full

.rounded .border

.rounded-full .border

Social Media Avatar

Social media profile avatar.

Image Description

Lettie Wanner

lettie@gmail.com

Rounded avatars with bottom status

Round avatars with bottom status indicator.

Image Description
Image Description
Image Description
Image Description