# Avatar with name

A person's avatar with their name beside it and an optional second line, such as their role.

Block: `smbk-avatar-with-name`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.

## Options

| Axis | Values | Default | Meaning |
|---|---|---|---|
| `size` | `xs`, `sm`, `md`, `lg` | `xs` | The avatar's size of the same name; the gap, the name and the second line grow with it. |

Parts: `smbk-avatar-with-name__avatar`, `smbk-avatar-with-name__text`, `smbk-avatar-with-name__name`, `smbk-avatar-with-name__second-line`

## Markup

```html
<div class="smbk-avatar-with-name smbk-avatar-with-name--size-xs">
  <span class="smbk-avatar smbk-avatar--size-xs smbk-avatar--tone-default smbk-avatar--type-initials smbk-avatar-with-name__avatar">
    <span class="smbk-avatar__initials" aria-hidden="true">AS</span>
  </span>
  <span class="smbk-avatar-with-name__text">
    <span class="smbk-avatar-with-name__name">Ana Silva</span>
    <span class="smbk-avatar-with-name__second-line">Design lead</span>
  </span>
</div>
```

## React

```tsx
import { AvatarWithName } from './design-system/components/avatar-with-name/avatar-with-name.js';

<AvatarWithName size="xs" name="Ana Silva" secondLine="Design lead" />
```

## Stylesheet

```css
/* smbk-avatar-with-name — Avatar with name. Figma "Avatar with name" 7125:4264 (Size: xs, sm, md, lg).
 * The avatar component at the size of the same name, then the person's name
 * over an optional second line, both centred against the avatar. The name and
 * the second line touch (the text label step, 0): their line heights give the
 * air. Each size steps the gap, the name's label style and the second line's
 * body style, as Figma binds them. The avatar keeps its own classes, so its
 * look is the avatar's; this stylesheet lays out the row and the text. */

.smbk-avatar-with-name {
  display: inline-flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.smbk-avatar-with-name__text {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-text-label);
  min-width: 0;
}

.smbk-avatar-with-name__name {
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-avatar-with-name__second-line {
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

/* ---- size ---- */

.smbk-avatar-with-name--size-sm {
  gap: var(--smbk-space-inline-md);
}

.smbk-avatar-with-name--size-sm .smbk-avatar-with-name__name,
.smbk-avatar-with-name--size-md .smbk-avatar-with-name__name {
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

.smbk-avatar-with-name--size-md {
  gap: var(--smbk-space-inline-md);
}

.smbk-avatar-with-name--size-md .smbk-avatar-with-name__second-line {
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.smbk-avatar-with-name--size-lg {
  gap: var(--smbk-space-inline-lg);
}

.smbk-avatar-with-name--size-lg .smbk-avatar-with-name__name {
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
}

.smbk-avatar-with-name--size-lg .smbk-avatar-with-name__second-line {
  font-family: var(--smbk-typography-body-md-font-family);
  font-size: var(--smbk-typography-body-md-font-size);
  font-weight: var(--smbk-typography-body-md-font-weight);
  line-height: var(--smbk-typography-body-md-line-height);
  letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}
```

## Tokens it reads

```json
{
  "space": {
    "inline": {
      "sm": {
        "$type": "dimension",
        "$value": "{{space.6}}",
        "$description": "Gap between things side by side, small."
      },
      "md": {
        "$type": "dimension",
        "$value": "{{space.8}}",
        "$description": "Gap between things side by side, medium."
      },
      "lg": {
        "$type": "dimension",
        "$value": "{{space.12}}",
        "$description": "Gap between things side by side, large."
      }
    },
    "text": {
      "label": {
        "$type": "dimension",
        "$value": "{{space.0}}",
        "$description": "Between a label or title and the line of supporting text right under it, inside a component. None: untrimmed line height already spaces the two lines."
      }
    }
  },
  "color": {
    "text": {
      "default": {
        "$type": "color",
        "$value": "{{color.grey.900}}",
        "$description": "Main text."
      },
      "subtle": {
        "$type": "color",
        "$value": "{{color.grey.700}}",
        "$description": "Secondary text: descriptions, metadata."
      }
    }
  },
  "typography": {
    "label-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label SM: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    },
    "body-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0px"
      }
    },
    "label-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label MD: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    },
    "body-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0px"
      }
    },
    "label-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label LG: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0px"
      }
    }
  }
}
```

## Purpose

Shows who someone is: their avatar with their name beside it and, if wanted, a second line under the name, such as their role, their team or when they wrote something. It is an article's byline, the author of a quote, or the person a task is assigned to.

## Anatomy

- The block, a row as wide as its content.
- The avatar part, the avatar component at the size of the same name: a picture, or the person's initials.
- The text part, the name and the second line, one under the other, centred against the avatar.
- The name part, in a label style.
- The second line part (optional), in a smaller body style and the subtle text color.

## When to use

- To name a person wherever their face helps: a byline, a comment, an assignee, a quote.
- In a card's header or footer, or a list row about a person.

## When not to use

- For a group of people. Use an [avatar group](avatar-group.md).
- For the signed-in person in a sidebar or app bar, which draw their own user part.
- When the name alone is enough and a picture would only add noise.

## Behavior

Four sizes, from extra small to large: each takes the avatar of the same size, and the name, the second line and the gap between avatar and text grow with it. A long name or second line wraps under itself; the avatar keeps its size. A picture that fails to load gives way to the initials, as the avatar's does. Nothing moves and nothing takes focus.

## Accessibility

### What it does for you

- The name is written out, so the avatar is decoration: its picture has an empty text alternative and its initials are hidden from screen readers, which read the name, then the second line.

### What you must do

- When the row is a link, as to the person's profile, put the whole row inside one link, so the name is the link's name.

### How to test

- With a screen reader, the row is read as the name, then the second line, with no picture or initials read before it.
- When the row is a link, Tab to it and press Enter: it follows the link, and the screen reader reads the name as the link's name.
- With text at 200% and the page 320 pixels wide, the name and the second line wrap and the picture stays whole.

## Usage rules

### Do

- Write the person's name as they write it.
- Keep the second line short: a role, a team or a date.

### Don't

- Put a button or a link inside the row.
- Use the second line for a sentence; it is a caption, not a paragraph.