Avatar with name

Ana SilvaDesign lead

Avatar with name options
Choice	Values	Default	What it does
`sizesmbk-avatar-with-name--size-<value>`	`xssmmdlg`	`xs`	The avatar's size of the same name; the gap, the name and the second line grow with it.

Partssmbk-avatar-with-name__avatarsmbk-avatar-with-name__textsmbk-avatar-with-name__namesmbk-avatar-with-name__second-line

A person with their picture, name and role.

Ana SilvaDesign lead

Extra small to large: the avatar, the name and the second line grow together.

Ana SilvaDesign lead

Without a second line, the name centres against the avatar.

Rui Costa

Under an article's title: the author and when it was written.

Maya ChenMarch 4, 2026 · 6 min read

A long name or second line wraps; the avatar keeps its size.

Maria Fernanda Albuquerque de SousaHead of research and customer insight

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.

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.
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.

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.

Ana SilvaDesign lead

Keep the second line to a role, a team or a date.

Ana SilvaAna leads the design team and looks after the brand and the website.

Don't

A sentence on the second line turns a name into a paragraph.

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.

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.

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.

The files the avatar with name is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

avatar-with-name.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

Avatar with name tokens
Token and CSS	Value	Preview	Foundation
space.inline.sm--smbk-space-inline-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
space.text.label--smbk-space-text-label	0px		Spacing
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.body-xs--smbk-typography-body-xs-font-family--smbk-typography-body-xs-font-size--smbk-typography-body-xs-font-weight--smbk-typography-body-xs-line-height--smbk-typography-body-xs-letter-spacing--smbk-typography-body-xs-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.inline.md--smbk-space-inline-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
typography.label-md--smbk-typography-label-md-font-family--smbk-typography-label-md-font-size--smbk-typography-label-md-font-weight--smbk-typography-label-md-line-height--smbk-typography-label-md-letter-spacing--smbk-typography-label-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.inline.lg--smbk-space-inline-lg	comfortable: 12pxcompact: 8pxchanges with density		Spacing
typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography

Manifest

avatar-with-name.manifest.json

{
  "name": "avatar-with-name",
  "block": "smbk-avatar-with-name",
  "summary": "A person's avatar with their name beside it and an optional second line, such as their role.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "xs",
        "sm",
        "md",
        "lg"
      ],
      "default": "xs",
      "description": "The avatar's size of the same name; the gap, the name and the second line grow with it."
    }
  },
  "flags": {},
  "parts": [
    "avatar",
    "text",
    "name",
    "second-line"
  ],
  "figmaNodeId": "7125:4264"
}

Menu

Customize the preview

Options

Examples

Usage

Sizes

Name only

A byline

Long words

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source

Options

Examples

Usage

Sizes

Name only

A byline

Long words

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Related

Source