Unstyled List

An unordered list with no list styles.

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="unstyled-list-left" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.unstyled-list-left { @include elr-unstyled-list(left); }

Border List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="border-list-left" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.border-list-left {
    @include elr-border-list(left);
    margin: 0;
}

Inline Lists

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="inline-list-left" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="inline-list-center" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="inline-list-right" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.inline-list-left { @include elr-inline-list(left); }
.inline-list-center { @include elr-inline-list(center); }
.inline-list-right { @include elr-inline-list(right); }

Custom Bullet List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="triangle-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="checked-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.bullet-list {
    @include elr-bullet-list;
    padding-left: 0;
}

.triangle-list {
    @include elr-bullet-list('\25B6');
    padding-left: 0;
}

.checked-list {
    @include elr-bullet-list('\2713');
    padding-left: 0;
}

Icon lists with Font Awesome

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five

HTML

<ul class="heart-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="paw-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>
<ul class="star-list" >
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
</ul>

Sass

.heart-list {
    @include elr-font-awesome-list('\f004');
    padding-left: 0;
}

.paw-list {
    @include elr-font-awesome-list('\f1b0');
    padding-left: 0;
}

.star-list {
    @include elr-font-awesome-list('\f005');
    padding-left: 0;
}