Lists

Stacks provides a few atomic classes to help style lists.

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

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

<ol class="list-reset">
  …
</ol>
<ul class="list-ls-none">
  …
</ul>
<ul class="list-ls-disc">
  …
</ul>
<ol class="list-ls-decimal">
  …
</ol>

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

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

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