# Avatar
> Profile picture or initials. A CSS component with two classes and no JavaScript.
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
**Plain HTML**
```html
```
```html
JSJSJSKB
```
**TypeScript**
```ts
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:
```tsx
import { lt } from "@lo-tek/interfaces/react"
JS
```
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:
```ts
import { lt } from "@lo-tek/interfaces"
const picture = document.querySelector("#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:
```tsx
JS
```
| 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
**Plain HTML**
```html
JSJane Smith
```
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:
```html
```
## Several overlapping pictures
**Plain HTML**
```html
JS
KB
MH
Jane Smith, Kate Brown and Mark Hill are following the case
```
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](/customising.md).
## Accessibility
- Initials are not identification. Two people can have the same ones, so the name has to be somewhere.
- An `` 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.
```
## Several overlapping pictures
**Plain HTML**
```html