List Helpers

Lists are used to display related blocks of information. They can be made up of lists of items, posts, links.

Unstyled List

Use an unstyled list when you have some content that is related but you don't want it to have a traditional list style. This gives the list the proper semantic meaning while avoiding visual style problems. This class also comes in handy when you are styling a list of boxes.

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

Border List

A border list uses a border to differentiate items in the list

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

Check List

A check list uses a check to differentiate items in the list

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

Inline List

A inline list is most often used for navigation

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