Utilities

Name Value List

An unordered list that describes a name/value pairing.

Examples#

Horizontal#

First Label:
Description for first label
Second Label:
Description for second label
<dl class="slds-list_horizontal slds-wrap">
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
  <dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>

Inline#

First Label:
Description for first label
Second Label:
Description for second label
<dl class="slds-list_inline">
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
  <dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>

Stacked#

First Label:
Description for first label
Second Label:
Second description
<dl class="slds-list_stacked">
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
  <dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
  <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>

Overview of CSS Classes#

Selector.slds-item_label
Summary

Label of the name-value pair variant. Layout is modified by its parent class.

Restrict*
ModifierTrue
Selector.slds-item_detail
Summary

Label of the name-value pair variant. Layout is modified by its parent class.

Restrict*
ModifierTrue

Name Value List Utility Release Notes