Persona

Three size tiers scale the avatar and all text slots together. The centered layout modifier suits profile card contexts. Add an action row only when account or contact actions are directly relevant.

Ahmed Mohammed System Administrator ahmed@example.gov.sa

With Details

Swap the action row for a Definition List to present contact fields, attributes, or metadata. Suits profile cards and team directory tiles where viewing identity matters more than acting on it.

Ahmed Mohammed System Administrator ahmed@example.gov.sa

Department: Digital Services
Employee ID: DGA-4827
Location: Riyadh
Joined: March 2021


<div class="nds-persona">
  <div class="nds-avatar">
    <i class="nds-icon nds-icon-avatar" aria-hidden="true"></i>
  </div>
  <div class="nds-persona-info">
    <span class="nds-persona-name">Ahmed Mohammed</span>
    <span class="nds-persona-role nds-truncate">System Administrator</span>
    <span class="nds-persona-desc">ahmed@example.gov.sa</span>
  </div>
  <hr class="nds-divider">
  <dl class="nds-definition-list nds-divided nds-grid" style="flex: 1 100%; --max-col:2; --mid-col:2; --min-col:1;">
    <div class="nds-definition-item">
      <dt>
        <i class="hgi hgi-stroke hgi-building-02"></i>
        <span class="nds-label">Department</span>
      </dt>
      <dd>Digital Services</dd>
    </div>
    <div class="nds-definition-item">
      <dt>
        <i class="hgi hgi-stroke hgi-id"></i>
        <span class="nds-label">Employee ID</span>
      </dt>
      <dd>DGA-4827</dd>
    </div>
    <div class="nds-definition-item">
      <dt>
        <i class="hgi hgi-stroke hgi-location-01"></i>
        <span class="nds-label">Location</span>
      </dt>
      <dd>Riyadh</dd>
    </div>
    <div class="nds-definition-item">
      <dt>
        <i class="hgi hgi-stroke hgi-calendar-01"></i>
        <span class="nds-label">Joined</span>
      </dt>
      <dd>March 2021</dd>
    </div>
  </dl>
</div>

Built-in Features

Three Display Sizes

Default, medium, and small tiers scale the avatar and all three text slots together, letting you match the component to any layout density from a full profile page to a compact navigation dropmenu.

CSS Token Overrides

Every visual slot exposes a public CSS custom property (such as --persona-name-color) so you can reskin a single line without touching the size variants or writing new SCSS.

Avatar Size Inheritance

The wrapper sets --avatar-size via CSS custom-property inheritance so any child .nds-avatar automatically matches the size tier, while explicit size modifiers on the avatar element still win.

Optional Action Row

Add .nds-persona-action with any buttons or links and the row fills the full width below the divider automatically, with each button sized to fit its label.

Centered Alignment

Add nds-center to the .nds-persona wrapper to switch to a column layout with all content centered: avatar, text block, divider, and action row stack vertically with center alignment.

Flexible Description Slot

The .nds-persona-desc field accepts any short secondary identifier: an email address, department, job code, location, or any other supporting label.

Usage Guidelines

Best Practices

Use the default size for standalone profile sections, account pages, and team directory cards where space allows the full 80px avatar
Use nds-md for mid-density contexts like sidebars, drawer panels, or list items where the full avatar is too prominent
Use nds-sm when embedding the persona in navigation dropmenus or narrow card tiles; this is the same size used in the main navigation user dropdown
Do not use persona for a plain byline or author credit where only a name is needed. A simple heading with a short nds-description line is sufficient; the full persona structure adds visual weight that may not be warranted
Include an Avatar when the user's visual identity adds recognition value; omit it when only the text fields matter, such as in a compact action panel
Add nds-center to the wrapper for greeting blocks and profile hero cards where a vertical, centered layout suits the design; keep the default row layout in list and navigation contexts
Only include .nds-persona-action when account or contact actions are contextually relevant. A display-only team directory tile generally does not need action buttons
Keep .nds-persona-desc to one short line. At nds-sm size the field renders at text-xs, leaving very little room; prefer a concise identifier over free-form text
Override only the token you need via a CSS custom property rather than writing additional SCSS. For example, --persona-name-color: var(--text-brand) highlights the name on a themed surface without affecting the other slots
Place a divider (hr.nds-divider) between the info block and the action row. Without it, actions appear directly adjacent to the last text field, reducing visual separation between identity and actions

Modifier Classes

Class	Description
`nds-md`	Medium size: 64px avatar and type scale one step smaller across name, role, and desc slots
`nds-sm`	Small size: 48px avatar and type scale two steps smaller across all text slots
`nds-colView`	Stacks all content vertically (flex-direction: column) while keeping start alignment
`nds-center`	Stacks all content vertically and centers everything: avatar, info, divider, and action row align to the middle

CSS Custom Properties

Property	Default	Description
`--persona-name-FS`	`--typo-text-xl-FS`	Name font size
`--persona-name-LH`	`--typo-text-xl-LH`	Name line height
`--persona-name-color`	`--text-default`	Name text color
`--persona-role-FS`	`--typo-text-lg-FS`	Role font size
`--persona-role-LH`	`--typo-text-lg-LH`	Role line height
`--persona-role-color`	`--text-primary-paragraph`	Role text color
`--persona-desc-FS`	`--typo-text-md-FS`	Desc font size
`--persona-desc-LH`	`--typo-text-md-LH`	Desc line height
`--persona-desc-color`	`--text-secondary-paragraph`	Desc text color
`--avatar-size`	`80px`	Avatar diameter; cascades via inheritance to any child `.nds-avatar`