Skip to content

Avatar

A component displaying a photo or in the absence of a photo - user initials.

Props

size
Is responsible for the size of the picture
type:String
default:md
values:xs, sm, md, lg, xl
path
Specifies the path to the image file
type:String
alt
required
A string of signs on the basis of which initials are created in the absence of a photo
type:String
square
Avatar is a circle by default. Setting this props to true causes that it is in the shape of a square with treaded horns.
type:Boolean
default:false

Examples

Avatars in various sizes
xs
John Doe
sm
John Doe
md
John Doe
lg
John Doe
xl
John Doe
html
<avatar size="xs" alt="John Doe" path="/path_to_file" />
html
<avatar size="sm" alt="John Doe" path="/path_to_file" />
html
<avatar size="md" alt="John Doe" path="/path_to_file" />
html
<avatar size="lg" alt="John Doe" path="/path_to_file" />
html
<avatar size="xl" alt="John Doe" path="/path_to_file" />
Avatar adapting to the parent element
John Doe
JD
html
<avatar size="full" alt="John Doe" path="/path_to_file" /> <avatar size="full" alt="John Doe" />
Without a path to the picture, with initials, different sizes
xs
MW
sm
RH
md
JD
lg
MW
xl
WM
html
<avatar size="xs" alt="John Doe" />
html
<avatar size="sm" alt="John Doe" />
html
<avatar alt="John Doe" />
html
<avatar size="lg" alt="John Doe" />
html
<avatar size="xl" alt="John Doe" />
Avatar in the square version
md
JD
md
John Doe
html
<avatar size="lg" alt="John Doe" square />
html
<avatar square size="lg" alt="John Doe" path="/path_to_file" />