component :: Avatar

The .avatar component is a visual representation of a user. It shows the user’s initials or an image thumbnail. Its default size is 56px. (See the HTML section below for all options.)

File	Description	Source
`component.avatar.css`	All avatar styles (`.avatar`)	Github

Playground

Copied!

<div class="avatar">
<div><span>SR</span></div>
</div>

HTML

Available modifiers

Available modifiers	Description
`.avatar`	Default - 56px
`.avatar` + `.avatar-sm`	Small - 24px
`.avatar` + `.avatar-md`	Medium - 36px
`.avatar` + `.avatar-lg`	Large - 80px
`.avatar` + `.avatar-xl`	Extra large - 128px
`.avatar` + `.is-online`	User is online - green dot
`.avatar` + `.is-offline`	User is offline - grey dot

Custom properties

The following custom properties are available in the default theme:

Property	Color
`--avatar-color`	Text color (when no image).
`--avatar-background-color`	Background color (when no image).
`--avatar-border-color`	Border color.
`--avatar-border-width`	Border width.
`--avatar-radius`	Radius. (`0` = square).
`--avatar-status-dot-color-offline`	Status dot color: offline.
`--avatar-status-dot-color-online`	Status dot color: online.

Astro component

Prop	Type	Default	Description
`size`	`string`	undefined	`sm`, `md`, `lg`, `xl` (px values)
`imageSrc`	`string`	undefined	Optional image.
`status`	`'online' \| 'offline'`	`undefined`	Shows a status dot (green online / grey offline)
`class`	`string`	undefined	Additional CSS classes, useful for helper classes.

Examples

Full name vs initials

SR

SR
```
---
import Avatar from "../../components/Avatar.astro";
---
<Avatar>Sonny Rollins</Avatar>
<Avatar>SR</Avatar>
```
The astro component can take initials or a full name and will output initials if an image is not provided. It will output the full name in the alt attribute if an image is provided.

Offline large avatar

---
import Avatar from "../../components/Avatar.astro";
import imageSrc from "../../assets/images/sonny.png";
---
<Avatar status="offline" size="lg" imageSrc={imageSrc}>Sonny Rollins</Avatar>

HTML examples

<div class="avatar">
  <div>
    <span>SR</span>
  </div>
</div>

component :: Avatar

Playground

Variation

State

Content