Sections

Lists

Stacks provides a few atomic classes to help style lists.

Classes

Section titled Classes
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;

Examples

Section titled Examples

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.

List Style

Section titled List Style
<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

List Position

Section titled List Position

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
Edit on GitHub