Avatars
5 posts tagged with "Avatars"
.avatar
The .avatar action avatar. It belongs to the avatar category within the ui area.
Action Syntax
.avatar +imagetag
.avatar !set:icon
.avatar "text"
.avatar @reference
Valid sizes
Modifiers
click
The .avatar action supports the click modifier.
Tags
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.avatar %imagetag
.dicebear-avatar
The .dicebear-avatar action a variety of avatar sets fron Dicebear. It belongs to the avatars category within the ui area.
Action Syntax
.dicebear-avatar "text"
.dicebear-avatar @reference
.dicebear-avatar $variable
Valid sizes
Tags
set
dicebear set name
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.dicebear-avatar "label"
// Using Variables
// Display dynamic content from variables
.dicebear-avatar $text
.icon-avatar
The .icon-avatar action a small avatar with icon. It belongs to the avatars category within the ui area.
Action Syntax
.icon-avatar !set:icon
.icon-avatar $variable
Valid sizes
Tags
circle
a circular avatar
square
a square avatar
rounded
a rounded square
Examples
// Basic Usage
.icon-avatar !icontag
// Using Variables
// Display dynamic content from variables
.icon-avatar $icontag
.image-avatar
The .image-avatar action avatar with an app image. It belongs to the avatars category within the ui area.
Action Syntax
.image-avatar +imagetag
.image-avatar $variable
.image-avatar https://...
Valid sizes
Tags
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.image-avatar %imagetag
// Using Variables
// Display dynamic content from variables
.image-avatar $imagetag
.initials-avatar
The .initials-avatar action a small avatar with initials / letters. It belongs to the avatars category within the ui area.
Action Syntax
.initials-avatar "text"
.initials-avatar $variable
.initials-avatar @reference
Valid sizes
Tags
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.initials-avatar "Text"
// Using Variables
// Display dynamic content from variables
.initials-avatar $initials