Components › Utilities

Lists

A list groups related content together.

VerticalVertical › DefaultVertical › DottedVertical › DecimalVertical › LinksVertical › Block linksVertical › Block links with spaceVertical › Inline block linksVertical › Inline block links with spaceVertical › Nested vertical listsVerticaldev ready

Preview

Code

<ul>
  <li>Vertical List</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

A vertical list stacks like a normal <ul>. To indent nested items, add the .slds-is-nested class to the <ul> nested inside.

The vertical list accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-block-links or .slds-has-inline-block-links to the <ul> will set a display block or inline-block to the anchor links. If you have anchor links within your vertical list and want spacing on the links, using .slds-has-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

If a list is not inside a .slds-text-longform element, but needs list item markers, use .slds-list--dotted for an unordered list and .slds-list--ordered for an ordered list.

Vertical DividersVertical Dividers › TopVertical Dividers › Top with spaceVertical Dividers › Top with linkVertical Dividers › Top with link and spaceVertical Dividers › BottomVertical Dividers › Bottom with spaceVertical Dividers › Bottom with linkVertical Dividers › Bottom with link and spaceVertical Dividers › AroundVertical Dividers › Around with spaceVertical Dividers › Around with linkVertical Dividers › Around with link and spaceVertical Dividersdev ready

Preview

Code

<ul class="slds-has-dividers--top">
  <li class="slds-item">List item with top divider</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>
</ul>

The vertical list with dividers adds spacing and a line border between list items. There are a handful of variations to choose from that will give different outcomes such as top, bottom and around dividers. This is achieved by adding the class .slds-has-dividers--top, .slds-has-dividers--bottom or .slds-has-dividers--around to an element. Additionally, spacing can be applied to the list items by adding the class .slds-has-dividers--top-space or .slds-has-dividers--bottom-space to an element. If the divider with spacing classes are used, note that on a smaller device, the spacing is slightly increased to accommodate for touch devices.

The vertical list with dividers accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-block-links or .slds-has-inline-block-links to an element will set a display block or inline-block to the anchor links. If you have anchor links within your vertical list and want spacing on the links, using .slds-has-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

By default, the list items in the vertical list have no interaction states, such as hover or selected. Adding .slds-has-list-interactions to the <ul> will output hover styles and target specific classes that should be adding by JavaScript. Using JavaScript, on selection of a list item, toggling .slds-is-selected to the <li> will output styles informing the user that the list item is selected.

HorizontalHorizontal › DefaultHorizontal › LinksHorizontal › Block linksHorizontal › Block links with spaceHorizontal › Inline block linksHorizontal › Inline block links with spaceHorizontaldev ready

Preview

Code

<ul class="slds-list--horizontal">
  <li>Horizontal List</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

A horizontal list aligns the list items horizontally from left to right.

The horizontal list accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-inline-block-links or .slds-has-block-links to the <ul class=slds-list--horizontal> will set a display inline-block or block to the anchor links. If you have anchor links within your horizontal list with dividers and want spacing on the links, using .slds-has-inline-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

Horizontal DividersHorizontal Dividers › LeftHorizontal Dividers › Left with linkHorizontal Dividers › Left with link spaceHorizontal Dividers › RightHorizontal Dividers › Right with linkHorizontal Dividers › Right with link spaceHorizontal Dividersdev ready

Preview

Code

<ul class="slds-list--horizontal slds-has-dividers--left">
  <li class="slds-item">Horizontal List with dot dividers to the left</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>
</ul>

The horizontal list with dividers adds spacing and a dot separator between list items in a horizontal list. There are a handful of variations to choose from that will give different outcomes such as left or right dot separator. This is achieved by adding the class .slds-has-dividers--left or .slds-has-dividers--right to <ul class=slds-list--horizontal>. Additionally, spacing can be applied to the list items by adding the class .slds-has-dividers--left-space or .slds-has-dividers--right-space to <ul class=slds-list--horizontal>.

The horizontal list with dividers accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-inline-block-links to the <ul> will set inline-block to the anchor links. Because we are dealing with a horizontal list, by default, the anchor links have an inline display. We want to stick with only using the default inline display or .slds-has-inline-block-links, refrain from using .slds-has-block-links on a horizontal list with dividers. This is due to the dot separators being generated as a psuedo element and having a block level display on the anchor links will introduce visual bugs. If you have anchor links within your horizontal list with dividers and want spacing on the links, using .slds-has-inline-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

The dot separators on the list items in a horizontal list with dividers don’t appear before the first item or after the last item.

Single DividerSingle Divider › TopSingle Divider › Top with spaceSingle Divider › RightSingle Divider › BottomSingle Divider › Bottom with spaceSingle Divider › LeftSingle Dividerdev ready

Preview

Code

<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li class="slds-has-divider--top">List Item</li>
</ul>

This divider utility can be applied to any vertical list item or menu item to separate the items within. It creates a single border with space.

Description ListDescription List › DefaultDescription List › InlineDescription List › HorizontalDescription Listdev ready

Preview

Code

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

Description lists <dl> are used when you have a term <dt> and information that describes it <dd>. A description list can contain more than one term for a description. It can also contain more than one description for a term. A <dl> should hold multiple <dt> + <dd> groupings.

By default, the <dt> and <dd> stack. No extra class is required. Adding .slds-dl--inline formats the <dl> so that the <dd> immediately follows the <dt>. Be aware that for inline styling, you will not be able to differentiate between multiple <dt> or <dd>. Adding .slds-dl--horizontal gives the <dt> a width (1/3) and the <dd> a 2/3 width. This means that for styling, the <dd> all start at the same horizontal alignment. You can override the widths by putting a sizing helper on the <dt> and <dd> elements. The sizing helpers used should add up to 100% width to keep the rows evenly spaced. Be aware that for horizontal styling, using more than one <dd> with a single <dt> will cause a visual misalignment.

Name Value PairName Value Pair › HorizontalName Value Pair › InlineName Value Pair › StackedName Value Pairdev ready

Preview

Code

<div class="slds-list--horizontal slds-wrap">
  <div class="slds-item--label slds-text-color--weak slds-truncate" title="First Label">First Label:</div>
  <div class="slds-item--detail slds-truncate">Description for first label</div>
  <div class="slds-item--label slds-text-color--weak slds-truncate" title="Second Label">Second Label:</div>
  <div class="slds-item--detail slds-truncate">Description for second label</div>
</div>

Component Overview

This CSS framework is built to create enterprise applications, so lists rarely need their default styling. All lists start by having their defaults reset to margin: 0 and padding: 0 with no list markers. When using a screen reader, a list is announced along with the number of items it contains.

When creating a basic page rather than application style, surround the group of headings, paragraphs, and lists with the .slds-text-longform class to retain their default spacing.

By default, a list is vertical, but you can change it to horizontal using these utility classes.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-list--dotted
Applied to:

ul

Outcome:

Creates an unordered list with markers

Required:

No, optional element or modifier

Comments:

Our application framework takes away default list styling. This recreates it

.slds-list--ordered
Applied to:

ol

Outcome:

Creates an ordered list with decimals

Required:

No, optional element or modifier

Comments:

Our application framework removes default list styling. This recreates it

.slds-list--vertical
Applied to:

Any element

Outcome:

Marks a vertical list

Required:

No, optional element or modifier

Comments:

--

.slds-list--horizontal
Applied to:

Any element

Outcome:

Causes items of a list to display horizontally

Required:

No, optional element or modifier

Comments:

This lists stacks in a mobile context. The output differs on the name-value variant, name-value display horizontally but stacks after each name-value

.slds-list--inline
Applied to:

Any element

Outcome:

Causes items of a list to display horizontally

Required:

No, optional element or modifier

Comments:

--

.slds-item
Applied to:

Any element

Outcome:

Marks a list item

Required:

No, optional element or modifier

Comments:

All lists use this class. Different CSS applies depending on the parent class.

.slds-dl--inline
Applied to:

dl

Outcome:

Causes description list to display horizontally with dt followed immediately by the dd.

Required:

No, optional element or modifier

Comments:

This lists stacks in a mobile context

.slds-dl--inline__label
Applied to:

dt

Outcome:

Marks a term

Required:

No, optional element or modifier

Comments:

--

.slds-dl--inline__detail
Applied to:

dd

Outcome:

Marks a description

Required:

No, optional element or modifier

Comments:

--

.slds-dl--horizontal
Applied to:

dl

Outcome:

Causes description list to display horizontally with dt consuming 33% of the space and the dd taking up the rest.

Required:

No, optional element or modifier

Comments:

This lists stacks in a mobile context. It can also take different sizing utilities to change the widths (which must always total 100%).

.slds-dl--horizontal__label
Applied to:

dt

Outcome:

Marks a term

Required:

No, optional element or modifier

Comments:

--

.slds-dl--horizontal__detail
Applied to:

dd

Outcome:

Marks a description

Required:

No, optional element or modifier

Comments:

--

.slds-item--label
Applied to:

div

Outcome:

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

Required:

No, optional element or modifier

Comments:

--

.slds-item--detail
Applied to:

div

Outcome:

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

Required:

No, optional element or modifier

Comments:

--

.slds-has-divider--top
Applied to:

Any element

Outcome:

Adds 1px border divider above an HTML element

Required:

No, optional element or modifier

Comments:

--

.slds-has-divider--top-space
Applied to:

Any element

Outcome:

Adds 1px border divider above an HTML element with a 0.5rem separation between the item above it

Required:

No, optional element or modifier

Comments:

--

.slds-has-divider--bottom
Applied to:

Any element

Outcome:

Adds 1px border divider below an HTML element

Required:

No, optional element or modifier

Comments:

--

.slds-has-divider--bottom-space
Applied to:

Any element

Outcome:

Adds 1px border divider below an HTML element with a 0.5rem separation between the item below it

Required:

No, optional element or modifier

Comments:

--

.slds-has-divider--right
Applied to:

Any element

Outcome:

Adds dot separator to the right of an HTML element

Required:

No, optional element or modifier

Comments:

--

.slds-has-divider--left
Applied to:

Any element

Outcome:

Adds dot separator to the left of an HTML element

Required:

No, optional element or modifier

Comments:

--

.slds-has-block-links
Applied to:

Any element

Outcome:

Gives the anchors within the list block styling

Required:

No, optional element or modifier

Comments:

--

.slds-has-inline-block-links
Applied to:

Any element

Outcome:

Gives the anchors within the list inline-block styling

Required:

No, optional element or modifier

Comments:

--

.slds-has-block-links--space
Applied to:

Any element

Outcome:

Gives the anchors within the list block styling with 0.5rem padding

Required:

No, optional element or modifier

Comments:

--

.slds-has-inline-block-links--space
Applied to:

Any element

Outcome:

Gives the anchors within the list inline-block styling with 0.5rem padding

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--top
Applied to:

Any element, children elements require .slds-item

Outcome:

Adds 1px border divider above list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--bottom
Applied to:

Any element, children elements require .slds-item

Outcome:

Adds 1px border divider below list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--top-space
Applied to:

Any element, children elements require .slds-item

Outcome:

Adds 1px border divider above list items and 0.5rem padding between items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--bottom-space
Applied to:

Any element, children elements require .slds-item

Outcome:

Adds 1px border divider below list items and 0.5rem padding between items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--left
Applied to:

.slds-list--horizontal, children elements require .slds-item

Outcome:

Adds dot separators to the left of horizontal list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--right
Applied to:

.slds-list--horizontal, children elements require .slds-item

Outcome:

Adds dot separators to the right of horizontal list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-list-interactions
Applied to:

.slds-item

Outcome:

Adds hover and selected styles to list items

Required:

No, optional element or modifier

Comments:

the selected class .slds-is-selected needs to be applied via JavaScript

.slds-list__item
Deprecated
Applied to:

li

Outcome:

Marks a list item

Required:

No, optional element or modifier

Comments:

Please use .slds-item instead

.slds-has-dividers
Deprecated
Applied to:

.slds-list--vertical
.slds-list--horizontal

Outcome:

Adds spacing and dividers between list items

Required:

No, optional element or modifier

Comments:

Deprecated - Both vertical and horizontal lists use this class when separators are needed.
On vertical lists a border is added. Horizontal lists are separated by a dot.

.slds-has-cards
Deprecated
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border around list items

Required:

No, optional element or modifier

Comments:

Please use .slds-has-dividers--around instead

.slds-has-cards--space
Deprecated
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border around list items and 0.5rem padding inside list items

Required:

No, optional element or modifier

Comments:

Please use .slds-has-dividers--around-space instead