Avatar

cds-avatar

The Avatar component is a visual representation of a user or entity, typically displayed as a circular image or placeholder. It supports multiple sizes, shapes, and customization options to adapt to various use cases, such as user profiles, lists, or chat interfaces.

Default

• Variant: --accent
• Size: --medium

CD

Default avatar

<span class="cds-avatar">
  <span class="cds-avatar__text">CD</span>
</span>

---

Elements

Element	Code	Parent	HTML tag	Required
Text	cds-avatar__text	Block: cds-avatar	<span>	optional
Icon	cds-avatar__icon	Block: cds-avatar	<span>	optional
Image	cds-avatar__image	Block: cds-avatar	<span>	optional

CD

<div class="cds-avatar">
  <span class="cds-avatar__text">CD</span>
</div>

<div class="cds-avatar">
  <span class="cds-avatar__icon cds-ph-user"></span>
</div>

<div class="cds-avatar cds-avatar--image">
  <span class="cds-avatar__image" style="background-image: url('/path/image5.jpg')"></span>
</div>

---

Modifiers

Modifier	Options
Variant	--accent, --primary, --secondary, --inverse, --image
Size	--tiny, --small, --medium, --large
Alt color	--color-1, --color-2, --color-3 ... --color-10

Variant

AC

AC

AC

AC

Example

<div class="cds-avatar cds-avatar--accent">
  <span class="cds-avatar__text">AC</span>
</div>

Size

C

C

CD

CDS

Example

<div class="cds-avatar cds-avatar--large">
  <span class="cds-avatar__text">CDS</span>
</div>

Number of letters

Use a single letter for "tiny" and "small," two letters for "medium," and while "large" is preferably represented with two letters, it also accepts up to three.

Alternative colors

Example

<div class="cds-avatar cds-avatar--color-4">
  <span class="cds-avatar__icon cds-ph-user"></span>
</div>

---

States

Modifier	Options
States	is-highlighted

Is highlighted

Example

<div class="cds-avatar cds-avatar--color-4 is-highlighted">
  <span class="cds-avatar__icon cds-ph-user"></span>  
</div>

Alternative Colors

The alternative colors have a highlighted version using the is-highlighted state, which features a different background color to make the component stand out.

---

Group container

cds-avatar-group

Example

<div class="cds-avatar-group">
  <!-- Avatars -->
</div>