Docs

Lists

Veritcal

Default

  • Veritcal!
  • List Item
  • List Item
<ul>
  <li>Veritcal!</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

Dotted

  • Basic ordered list
  • List Item
  • List Item
<ul class="joy-list--dotted">
  <li>Basic ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

Decimal

  1. Basic ordered list
  2. List Item
  3. List Item
<ol class="joy-list--ordered">
  <li>Basic ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>

Links

<ul>
  <li><a href="javascript:void(0);">Vertical List with links</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Block links

<ul class="joy-has-block-links">
  <li><a href="javascript:void(0);">Vertical List with block links</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Block links with space

<ul class="joy-has-block-links--space">
  <li><a href="javascript:void(0);">Vertical List with block links with space</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Inline block links

<ul class="joy-has-inline-block-links">
  <li><a href="javascript:void(0);">Vertical List with inline-block links</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Inline block links with space

<ul class="joy-has-inline-block-links--space">
  <li><a href="javascript:void(0);">Vertical List with inline-block links with space</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

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>
    <ul class="joy-is-nested">
      <li>Nested Vertical List</li>
      <li>List Item</li>
      <li>
        <ul class="joy-is-nested">
          <li>Nested Vertical List</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Veritcal Dividers

Top

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

Top with space

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

Top with link

<ul class="joy-has-dividers--top joy-has-block-links">
  <li class="joy-item"><a href="javascript:void(0);">List item with link and top divider</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Top with link and space

<ul class="joy-has-dividers--top joy-has-block-links--space">
  <li class="joy-item"><a href="javascript:void(0);">List item with link and top divider</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Bottom

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

Bottom with space

  • List item with bottom divider with space
  • List Item
  • List Item
<ul class="joy-has-dividers--bottom-space">
  <li class="joy-item">List item with bottom divider with space</li>
  <li class="joy-item">List Item</li>
  <li class="joy-item">List Item</li>
</ul>

Bottom with link

<ul class="joy-has-dividers--bottom joy-has-block-links">
  <li class="joy-item"><a href="javascript:void(0);">List item with link and bottom divider</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Bottom with link and space

<ul class="joy-has-dividers--bottom joy-has-block-links--space">
  <li class="joy-item"><a href="javascript:void(0);">List item with link and bottom divider</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Around

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

Around with space

  • List item with around divider with space
  • List Item
  • List Item
<ul class="joy-has-dividers--around-space">
  <li class="joy-item">List item with around divider with space</li>
  <li class="joy-item">List Item</li>
  <li class="joy-item">List Item</li>
</ul>

Around with link

<ul class="joy-has-dividers--around joy-has-block-links">
  <li class="joy-item"><a href="javascript:void(0);">List item with link and around divider</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Around with link and space

<ul class="joy-has-dividers--around joy-has-block-links--space">
  <li class="joy-item"><a href="javascript:void(0);">List item with link and around divider</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Horizontal

Default

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

Links

<ul class="joy-list--horizontal">
  <li><a href="javascript:void(0);">Horizontal List with inline level links</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Block links

<ul class="joy-list--horizontal joy-has-block-links">
  <li><a href="javascript:void(0);">Horizontal List with block level links</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Block links with space

<ul class="joy-list--horizontal joy-has-block-links--space">
  <li><a href="javascript:void(0);">Horizontal List with block level links and space</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Inline block links

<ul class="joy-list--horizontal joy-has-inline-block-links">
  <li><a href="javascript:void(0);">Horizontal List with inline-block level links</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Inline block links with space

<ul class="joy-list--horizontal joy-has-inline-block-links--space">
  <li><a href="javascript:void(0);">Horizontal List with inline-block level links and space</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
  <li><a href="javascript:void(0);">List Item</a></li>
</ul>

Horizontal Dividers

Left

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

Left with link

<ul class="joy-list--horizontal joy-has-dividers--left joy-has-block-links">
  <li class="joy-item"><a href="javascript:void(0);">Horizontal List with block level links and dot dividers</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Left with link space

<ul class="joy-list--horizontal joy-has-dividers--left joy-has-block-links--space">
  <li class="joy-item"><a href="javascript:void(0);">Horizontal List with block level links and dot dividers with space</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Right

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

Right with link

<ul class="joy-list--horizontal joy-has-dividers--right joy-has-block-links">
  <li class="joy-item"><a href="javascript:void(0);">Horizontal List with block level links and dot dividers</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Right with link space

<ul class="joy-list--horizontal joy-has-dividers--right joy-has-block-links">
  <li class="joy-item"><a href="javascript:void(0);">Horizontal List with block level links and dot dividers</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
  <li class="joy-item"><a href="javascript:void(0);">List Item</a></li>
</ul>

Single Divider

Top

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

Top with space

  • List Item
  • List Item
  • List Item
<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li class="joy-has-divider--top-space">List Item</li>
</ul>

Right

  • List Item
  • List Item
  • List Item
<ul class="joy-list--horizontal">
  <li>List Item</li>
  <li class="joy-has-divider--right">List Item</li>
  <li>List Item</li>
</ul>

Bottom

  • List Item
  • List Item
  • List Item
<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li class="joy-has-divider--bottom">List Item</li>
</ul>

Bottom with space

  • List Item
  • List Item
  • List Item
<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li class="joy-has-divider--bottom-space">List Item</li>
</ul>

Left

  • List Item
  • List Item
  • List Item
<ul class="joy-list--horizontal">
  <li>List Item</li>
  <li class="joy-has-divider--left">List Item</li>
  <li>List Item</li>
</ul>

Description List

Default

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>
  <dd>Description for second label</dd>
</dl>

Inline

First Label:
Description for first label
Second Label:
Description for second label
<dl class="joy-dl--inline">
  <dt class="joy-dl--inline__label">First Label:</dt>
  <dd class="joy-dl--inline__detail">Description for first label</dd>
  <dt class="joy-dl--inline__label">Second Label:</dt>
  <dd class="joy-dl--inline__detail">Description for second label</dd>
</dl>

Horizontal

First Label:
Description for first label
Second Label:
Second description
<dl class="joy-dl--horizontal">
  <dt class="joy-dl--horizontal__label">First Label:</dt>
  <dd class="joy-dl--horizontal__detail">Description for first label</dd>
  <dt class="joy-dl--horizontal__label">Second Label:</dt>
  <dd class="joy-dl--horizontal__detail">Second description</dd>
</dl>

Name Value Pair

Horizontal

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

Inline

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

Stacked

First Label:
Description for first label
Second Label:
Second description
<div class="joy-list--stacked">
  <div class="joy-item--label joy-text-color--weak joy-truncate" title="First Label">First Label:</div>
  <div class="joy-item--detail joy-truncate">Description for first label</div>
  <div class="joy-item--label joy-text-color--weak joy-truncate" title="Second Label">Second Label:</div>
  <div class="joy-item--detail joy-truncate">Second description</div>
</div>