Lists | aurora-utilities Documentation

@mixin list-reset()

Removes list delimiters, margin, and padding from ul or ol elements.

Examples

scss Usage

.list-reset {
  @include list-reset;
}

css compiled

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

html

<ul class="list-reset">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Nunc dignissim risus id metus.</li>
  <li>Cras ornare tristique elit.</li>
</ul>

Used By

@mixin custom-bullets()

@mixin custom-numbers()

@mixin custom-bullets()

Custom bullets

Examples

scss Usage

.list-bulleted {
  @include custom-bullets('\00BB');
}

css compiled

@charset "UTF-8";
.list-bulleted,
.list-bulleted ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-bulleted li {
  margin-left: 1em;
}

.list-bulleted li:before {
  color: #2f80e8;
  content: "»";
  float: left;
  font-size: 1rem;
  margin-left: -1em;
}

html

<ul class="list-bulleted">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.
    <ul>
      <li>Vestibulum auctor dapibus neque.</li>
      <li>Nunc dignissim risus id metus.
        <ul>
          <li>Cras ornare tristique elit.</li>
          <li>Vivamus vestibulum ntulla nec ante.</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Requires

@mixin list-reset()

@mixin custom-numbers()

Custom numbering

Examples

scss Usage

.list-numbered {
  @include custom-numbers('decimal', 'lower-roman', 'lower-alpha');
}

css compiled

.list-numbered,
.list-numbered ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ordered-list;
}

.list-numbered li {
  margin-left: 1em;
}

.list-numbered li:before {
  color: #2f80e8;
  content: counter(ordered-list, decimal);
  counter-increment: ordered-list;
  float: left;
  font-size: 1rem;
  margin-left: -1em;
  text-align: right;
}

.list-numbered ol li:before {
  content: counter(ordered-list, lower-roman);
}

.list-numbered ol ol li:before {
  content: counter(ordered-list, lower-alpha);
}

html

<ol class="list-numbered">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.
    <ol>
      <li>Vestibulum auctor dapibus neque.</li>
      <li>Nunc dignissim risus id metus.
        <ol>
          <li>Cras ornare tristique elit.</li>
          <li>Vivamus vestibulum ntulla nec ante.</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>