Kickstand UI

# List Utility Classes

Kickstand UI's list utility classes can be used to quickly style lists throughout your application without custom styles.

# Inside

(border added for demonstration)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-inside">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Outside

(border added for demonstration)

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-inside">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Decimal

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-decimal">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Disc

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-decimal">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Lower-Alpha

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-lower-alpha">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Upper-Alpha

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-upper-alpha">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Lower-Roman

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-lower-roman">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Upper-Roman

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-upper-roman">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# Initial

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-initial">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

# None

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="list-none">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

← Position →