Avatar

A round surface with a picture or initials. The component says nothing about who the person is: the text next to it does that, or a text you give the picture.

How to use it

Example

Plain HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/avatar/avatar.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/dist/lotek.css -->

<span class="lt-avatar" data-size="small" aria-hidden="true">JS</span>
<span class="lt-avatar" aria-hidden="true">JS</span>
<span class="lt-avatar" data-size="large" aria-hidden="true">JS</span>
<span class="lt-avatar" data-variant="square" aria-hidden="true">KB</span>

TypeScript

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/avatar.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<span {...lt.avatar({ size: "small" })} aria-hidden="true">JS</span>

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If the element is already there, set them on it. That is the way when you enhance HTML a server or a template has sent:

import { lt } from "@lo-tek/interfaces"

const picture = document.querySelector<HTMLElement>("#profile")

lt.setAttributes(picture, lt.avatar({ size: "large" }))

The list that lets the pictures overlap has no attributes, only a class, and it hangs on the function:

<ul className={lt.avatar.stack}>
  <li><span {...lt.avatar({ size: "small" })} aria-hidden="true">JS</span></li>
</ul>

Attribute	Effect
data-size="small"	For a table row or a list
(omitted)	Next to a name
data-size="large"	On a profile page
data-variant="square"	Rounded square, for logos and organisations

With a name next to it

Example

Plain HTML

<span class="lt-avatar" data-size="small" aria-hidden="true">JS</span>
<span>Jane Smith</span>

When the name is already there, the picture is decoration. aria-hidden="true" stops the initials being read out as “J S” before the name.

The picture and the name are two elements side by side. How they are laid out is the app’s layout, not the component’s: a flex row with gap, a table cell, or whatever else the page uses.

When the picture stands alone, it has to say who it is:

<span class="lt-avatar">
  <img src="/images/jane.jpg" alt="Jane Smith" />
</span>

Several overlapping pictures

Example

Plain HTML

<ul class="lt-avatar-stack">
<li><span class="lt-avatar" data-size="small" aria-hidden="true">JS</span></li>
<li><span class="lt-avatar" data-size="small" aria-hidden="true">KB</span></li>
<li><span class="lt-avatar" data-size="small" aria-hidden="true">MH</span></li>
</ul>
<p>Jane Smith, Kate Brown and Mark Hill are following the case</p>

The order is reversed in CSS: the first element in the markup sits furthest to the right in the stack. The names have to be somewhere, as in the text below: initials are not identification.

Classes you can style

Class	What it is
.lt-avatar	The surface with the picture or the initials

Class	What it is
.lt-avatar-stack	The list of overlapping pictures

Variable	Default
--lt-avatar-size	var(--lt-spacing-10)
--lt-avatar-radius	var(--lt-spacing-1)
--lt-avatar-stack-overlap	calc(var(--lt-spacing-2) * -1)

--lt-avatar-size applies to the default size. data-size="small" and data-size="large" set their own.

--lt-avatar-radius applies only to the square variant. The round one is always round. See Customising.

Accessibility

• Initials are not identification. Two people can have the same ones, so the name has to be somewhere.
• An <img> without alt is read out as the file name. If the picture is decoration, write alt="".
• Do not let the colour of the surface mean anything. It is arbitrary to anyone who cannot see it.