Lists

Stacks provides a few atomic classes to help style lists.

Class Output
.list-reset list-style: none; margin: 0; padding: 0;
.list-ls-none list-style: none;
.list-ls-disc list-style-type: disc;
.list-ls-decimal list-style-type: decimal;
.list-ls-unset list-style-type: inherit;
.list-inside list-style-position: inside;
.list-outside list-style-position: outside;

By design, our lists inherit some sensible margins by default. However, in some layouts, you may want to strip these default margins by adding .list-reset and then explicitly choosing a list style and list style position. These classes can be applied to ordered and unordered lists interchangably, though if you’re wanting to show decimals, it’s most appropriate to mark your list up as an ordered list.

<ol class="list-reset">

</ol>
<ul class="list-ls-none">

</ul>
<ul class="list-ls-disc">

</ul>
<ol class="list-ls-decimal">

</ol>
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5

By default, the position of markers in a list item are outside their containing element.

<ul class="list-reset list-ls-disc list-inside">

</ul>
<ul class="list-reset list-ls-disc list-outside">

</ul>
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
Deploys by Netlify