Utilities

Vertical List

A vertical list.

Base#

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

Examples#

Dotted#

  • Basic ordered list
  • List Item
  • List Item
<ul class="slds-list_dotted">
  <li>Basic ordered list</li>
  <li>List Item</li>
  <li>List Item</li>

Decimal#

  1. Basic ordered list
  2. List Item
  3. List Item
<ol class="slds-list_ordered">
  <li>Basic ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
<ul>
  <li>
    <a href="#">Vertical List with links</a>
  </li>
<ul class="slds-has-block-links">
  <li>
    <a href="#">Vertical List with block links</a>
  </li>
<ul class="slds-has-block-links_space">
  <li>
    <a href="#">Vertical List with block links with space</a>
  </li>
<ul class="slds-has-inline-block-links">
  <li>
    <a href="#">Vertical List with inline-block links</a>
  </li>
<ul class="slds-has-inline-block-links_space">
  <li>
    <a href="#">Vertical List with inline-block links with space</a>
  </li>

Nested Vertical Lists#

  • Vertical List with nested vertical lists
  • List Item
    • Nested Vertical List
    • List Item
      • Nested Vertical List
      • List Item
      • List Item
<ul>
  <li>Vertical List with nested vertical lists</li>
  <li>List Item</li>
  <li>

Top#

  • List item with top divider
  • List Item
  • List Item
<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>

Top with Space#

  • List item with top divider with space
  • List Item
  • List Item
<ul class="slds-has-dividers_top-space">
  <li class="slds-item">List item with top divider with space</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>
<ul class="slds-has-dividers_top slds-has-block-links">
  <li class="slds-item">
    <a href="#">List item with link and top divider</a>
  </li>
<ul class="slds-has-dividers_top slds-has-block-links_space">
  <li class="slds-item">
    <a href="#">List item with link and top divider</a>
  </li>

Bottom#

  • List item with bottom divider
  • List Item
  • List Item
<ul class="slds-has-dividers_bottom">
  <li class="slds-item">List item with bottom divider</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>

Bottom with Space#

  • List item with bottom divider with space
  • List Item
  • List Item
<ul class="slds-has-dividers_bottom-space">
  <li class="slds-item">List item with bottom divider with space</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>
<ul class="slds-has-dividers_bottom slds-has-block-links">
  <li class="slds-item">
    <a href="#">List item with link and bottom divider</a>
  </li>
<ul class="slds-has-dividers_bottom slds-has-block-links_space">
  <li class="slds-item">
    <a href="#">List item with link and bottom divider with space</a>
  </li>

Around#

  • List item with around divider
  • List Item
  • List Item
<ul class="slds-has-dividers_around">
  <li class="slds-item">List item with around divider</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>

Around with Space#

  • List item with around divider with space
  • List Item
  • List Item
<ul class="slds-has-dividers_around-space">
  <li class="slds-item">List item with around divider with space</li>
  <li class="slds-item">List Item</li>
  <li class="slds-item">List Item</li>
<ul class="slds-has-dividers_around slds-has-block-links">
  <li class="slds-item">
    <a href="#">List item with link and around divider</a>
  </li>
<ul class="slds-has-dividers_around slds-has-block-links_space">
  <li class="slds-item">
    <a href="#">List item with link and around divider with space</a>
  </li>

Overview of CSS Classes#

Selector.slds-list_vertical-space
Summary

Marks a vertical list with .5rem spacing around

Restrict*
ModifierTrue
Selector.slds-list_vertical-space-medium
Summary

Marks a vertical list with 1rem spacing around

Restrict*
ModifierTrue

Vertical List Utility Release Notes