A description list

Base#

First Label:: Description for first label
Second Label:: Description for second label

<dl>
  <dt>First Label:</dt>
  <dd>Description for first label</dd>
  <dt>Second Label:</dt>

Examples#

Inline#

First Label:: Description for first label
Second Label:: Description for second label

<dl class="slds-dl_inline">
  <dt class="slds-dl_inline__label">First Label:</dt>
  <dd class="slds-dl_inline__detail">Description for first label</dd>
  <dt class="slds-dl_inline__label">Second Label:</dt>

Inline Narrow#

First Label:: Description for first label
Second Label:: Second description

<div class="slds-region_narrow" style="width:360px">
  <dl class="slds-dl_inline">
    <dt class="slds-dl_inline__label">First Label:</dt>
    <dd class="slds-dl_inline__detail">Description for first label</dd>

Horizontal#

First Label:: Description for first label
Second Label:: Second description

<dl class="slds-dl_horizontal">
  <dt class="slds-dl_horizontal__label">First Label:</dt>
  <dd class="slds-dl_horizontal__detail">Description for first label</dd>
  <dt class="slds-dl_horizontal__label">Second Label:</dt>

Horizontal Narrow#

First Label:: Description for first label
Second Label:: Second description

<div class="slds-region_narrow" style="width:360px">
  <dl class="slds-dl_horizontal">
    <dt class="slds-dl_horizontal__label">First Label:</dt>
    <dd class="slds-dl_horizontal__detail">Description for first label</dd>

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-dl_inline`
Summary	Causes description list to display horizontally with `dt` followed immediately by the `dd`.
Restrict	`*`
Modifier	True

Selector	`.slds-dl_inline__label`
Summary	Marks a term
Restrict	`*`
Modifier	True

Selector	`.slds-dl_inline__detail`
Summary	Marks a description
Restrict	`*`
Modifier	True

Selector	`.slds-dl_horizontal`
Summary	Causes description list to display horizontally with `dt` consuming 33% of the space and the `dd` taking up the rest.
Restrict	`*`
Modifier	True

Selector	`.slds-dl_horizontal__label`
Summary	Marks a term
Restrict	`*`
Modifier	True

Selector	`.slds-dl_horizontal__detail`
Summary	Marks a description
Restrict	`*`
Modifier	True

Description List Utilities Release Notes

2.7.0

Changed

Changed behavior of media query when slds-dl_horizontal and slds-dl_inline are located inside of slds-region_narrow

Sections

Base#

Examples#

Inline#

Inline Narrow#

Horizontal#

Horizontal Narrow#

Overview of CSS Classes#

What are these categories?

Description List Utilities Release Notes

2.7.0

Changed