Components

Avatar

A user image that falls back to initials when it fails to load.

Usage

Basic

HTML

<bs:bsui-avatar fallback="AL" alt="Ada Lovelace" />

Team row

A run of initials stands in for the people on a project.

HTML

<bs:bsui-stack direction="row" gap="2" justify="center">
  <bs:bsui-avatar fallback="AL" />
  <bs:bsui-avatar fallback="GH" />
  <bs:bsui-avatar fallback="KJ" />
  <bs:bsui-avatar fallback="+3" />
</bs:bsui-stack>

With a name

Pairing the avatar with a name and a role makes an account row.

Ada Lovelace Workspace owner

HTML

<bs:bsui-stack direction="row" gap="3" align="center">
  <bs:bsui-avatar fallback="AL" />
  <bs:bsui-stack direction="column" gap="1">
    <bs:bsui-text content="Ada Lovelace" variant="label" tag="span" />
    <bs:bsui-text content="Workspace owner" variant="muted" tag="span" />
  </bs:bsui-stack>
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`src`	`text`	—
`alt`	`text`	—
`fallback`	`text`	—