Objects

Lists

Objects to enhance the use of Lists.

Dependencies

sky-toolkit-core

🔗

Lists are an incredibly versatile markup tool. To make life easier, Toolkit surfaces 3 different list objects for use on unordered lists <ul> or ordered lists <ol>:

List Bare

Remove indents and bullet points from any list.

Item 1
Item 2
Item 3

<ul class="o-list-bare">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List Block

Display any list of items as a collection of stacked blocks.

Item 1
Item 2
Item 3

<ul class="o-list-block">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

List Inline

Display any list of items as a single line.

Item 1
Item 2
Item 3

<ul class="o-list-inline">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>

Modifiers

Narrow

Reduce the inline spacing by half.

Item 1
Item 2
Item 3

<ul class="o-list-inline o-list-inline--narrow">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>

Wide

Double the inline spacing.

Item 1
Item 2
Item 3

<ul class="o-list-inline o-list-inline--wide">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>

Flush

Remove all inline spacing.

Item 1
Item 2
Item 3

<ul class="o-list-inline o-list-inline--flush">
  <li class="o-list-inline__item">Item 1</li>
  <li class="o-list-inline__item">Item 2</li>
  <li class="o-list-inline__item">Item 3</li>
</ul>