Avatar

An image element with a fallback for representing the user.

<div class="av-badge">
  <div class="av av-initials">JD</div>
  <span class="av-status"></span>
</div>

<div class="av av-teal">AB</div>

<div class="av-group">
  <div class="av av-teal">A</div>
  <div class="av av-purple">B</div>
  <div class="av av-initials">+3</div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Usage

Import

<link rel="stylesheet" href="ds-shared.css">

Basic

<div class="av av-initials">JD</div>

Examples

Sizes

<div class="av av-sm av-initials">XS</div>
<div class="av av-initials">SM</div>
<div class="av av-lg av-teal">LG</div>
<div class="av av-xl av-purple">XL</div>

API Reference

Size classes

Class	Size
`av-sm`	32px
`av`	40px (default)
`av-lg`	56px
`av-xl`	72px

Color classes

Class	Description
`av-initials`	Gray bg, dark text
`av-teal`	Teal (#75C9B7) bg, white text
`av-purple`	Purple (#C084FC) bg, white text
`av-dark-bg`	Dark bg for dark mode

Status indicator

Class	Color
`av-status`	Online (green)
`av-status away`	Away (amber)
`av-status offline`	Offline (gray)

← Previous Alert Dialog Next → Badge