afv-library/skills/design-systems-slds-apply/references/utilities/name-value-list.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	refs	tags	keywords
slds.guidance.utilities.name-value-list	Name-Value List Utilities	SLDS name-value list utility classes for structured data display	Utilities for structured data lists (labels and details). Creates horizontal, vertical, and inline label-value pair layouts.	reference	utilities	name-value-list	structured	intermediate	implementer	implement	slds.guidance.utilities slds.guidance.overview.utilities slds.guidance.hooks.spacing	utilities name-value-list data-display lists	slds-list_horizontal slds-list_vertical slds-list_inline slds-item_label slds-item_detail

Name-Value List - Structured Data Display

Creating label-value pair layouts in horizontal, vertical, and inline configurations.

Core Classes

Class	Purpose
slds-list_horizontal	Layout container for horizontal name-value pairs with 30/70 split
slds-list_vertical	Layout container for vertical (stacked) name-value pairs
slds-list_inline	Inline flex container for compact name-value pairs
slds-item_label	Label element with 30% width and right padding (12px)
slds-item_detail	Detail/value element with 70% width

Layout Variants

Horizontal Layout (30/70 Split)

Variant	Label Width	Detail Width	Spacing
slds-list_horizontal	30%	70%	12px gap

Vertical Layout

Variant	Display	Spacing
slds-list_vertical	Block stacked	Default line height

Inline Layout

Variant	Display	Max Width
slds-list_inline	inline-flex	100%

Common Patterns

Horizontal Name-Value List

<!-- Standard 30/70 horizontal layout -->
<dl class="slds-list_horizontal">
  <dt class="slds-item_label">Account Name</dt>
  <dd class="slds-item_detail">Acme Corporation</dd>

  <dt class="slds-item_label">Account Type</dt>
  <dd class="slds-item_detail">Enterprise Customer</dd>

  <dt class="slds-item_label">Industry</dt>
  <dd class="slds-item_detail">Technology</dd>
</dl>

Vertical Stacked List

<!-- Vertical stacked layout for long content -->
<dl class="slds-list_vertical">
  <dt class="slds-item_label">Description</dt>
  <dd class="slds-item_detail">
    This is a detailed description that spans multiple lines
    and works better in a vertical layout.
  </dd>

  <dt class="slds-item_label">Notes</dt>
  <dd class="slds-item_detail">
    Additional notes and comments that may be lengthy.
  </dd>
</dl>

Inline Compact List

<!-- Inline layout for compact display -->
<dl class="slds-list_inline">
  <dt class="slds-item_label">Status:</dt>
  <dd class="slds-item_detail">Active</dd>

  <dt class="slds-item_label">Priority:</dt>
  <dd class="slds-item_detail">High</dd>
</dl>

Mixed Layout in Card

<!-- Name-value list within a card component -->
<article class="slds-card">
  <div class="slds-card__header">
    <h2>Contact Details</h2>
  </div>
  <div class="slds-card__body">
    <dl class="slds-list_horizontal">
      <dt class="slds-item_label">Name</dt>
      <dd class="slds-item_detail">John Smith</dd>

      <dt class="slds-item_label">Email</dt>
      <dd class="slds-item_detail">john.smith@example.com</dd>

      <dt class="slds-item_label">Phone</dt>
      <dd class="slds-item_detail">(555) 123-4567</dd>
    </dl>
  </div>
</article>

Best Practices

✅ Use slds-list_horizontal for compact record details with short values ✅ Use slds-list_vertical for long text content or descriptions ✅ Use slds-list_inline for status indicators and brief metadata ✅ Use semantic <dl>, <dt>, <dd> elements for accessibility ✅ Apply slds-item_label to <dt> and slds-item_detail to <dd> ✅ Maintain the 30/70 ratio for horizontal layouts to ensure consistency

❌ Avoid using name-value lists for form inputs (use form layouts instead) ❌ Avoid mixing layout types within the same list ❌ Never omit slds-item_label or slds-item_detail classes ❌ Avoid horizontal layout for values longer than 2-3 lines

Spacing Details

The name-value list utilities use these specific spacing tokens:

• Horizontal gap: var(--slds-g-spacing-3) (12px)
• Inline spacing: var(--slds-g-spacing-3) to var(--slds-g-spacing-4) (12-16px)
• Label padding: padding-inline-end: var(--slds-g-spacing-3) (12px right padding)

Accessibility Notes

• Use <dl> (description list) as the container
• Use <dt> (description term) for labels with slds-item_label
• Use <dd> (description details) for values with slds-item_detail
• Screen readers announce the semantic relationship between labels and values
• Maintain logical reading order in the HTML structure