list

List elements support three styles: dotted, numbered, and checked. The numbered style should only be used for ordered lists.

table of content

component variations

unordered list dotted

Open on blank page
  • Text View standard regular Lorem ipsum dolor sit amet.
  • Text View standard regular Lorem ipsum dolor sit amet consetetur.
  • Text View standard regular Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Text View standard regular Lorem ipsum dolor sit amet.
  • Text View standard regular Lorem ipsum dolor sit amet consetetur.
<ul class="a-list a-list--dot">
  <li>Text View standard regular Lorem ipsum dolor sit amet.</li>
  <li>Text View standard regular Lorem ipsum dolor sit amet consetetur.</li>
  <li>
    Text View standard regular Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat.
  </li>
  <li>Text View standard regular Lorem ipsum dolor sit amet.</li>
  <li>Text View standard regular Lorem ipsum dolor sit amet consetetur.</li>
</ul>

ordered list

Open on blank page
  1. Text View standard regular Lorem ipsum dolor sit amet.
  2. Text View standard regular Lorem ipsum dolor sit amet consetetur.
  3. Text View standard regular Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  4. Text View standard regular Lorem ipsum dolor sit amet.
  5. Text View standard regular Lorem ipsum dolor sit amet consetetur.
<ol class="a-list a-list--num">
  <li>Text View standard regular Lorem ipsum dolor sit amet.</li>
  <li>Text View standard regular Lorem ipsum dolor sit amet consetetur.</li>
  <li>
    Text View standard regular Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat.
  </li>
  <li>Text View standard regular Lorem ipsum dolor sit amet.</li>
  <li>Text View standard regular Lorem ipsum dolor sit amet consetetur.</li>
</ol>

unordered list checked

Open on blank page
  • Text View standard regular Lorem ipsum dolor sit amet.
  • Text View standard regular Lorem ipsum dolor sit amet consetetur.
  • Text View standard regular Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  • Text View standard regular Lorem ipsum dolor sit amet.
  • Text View standard regular Lorem ipsum dolor sit amet consetetur.
<ul class="a-list a-list--check">
  <li>Text View standard regular Lorem ipsum dolor sit amet.</li>
  <li>Text View standard regular Lorem ipsum dolor sit amet consetetur.</li>
  <li>
    Text View standard regular Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat.
  </li>
  <li>Text View standard regular Lorem ipsum dolor sit amet.</li>
  <li>Text View standard regular Lorem ipsum dolor sit amet consetetur.</li>
</ul>

additional content

styles SCSS

%ul {
  margin: 0;
  margin-bottom: 1.5rem;
}

%li {
  list-style: none;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;

  &::before {
    left: 0;
    position: absolute;
  }

  &:first-of-type {
    counter-reset: item;
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}

%ul-li {
  background-color: var(--plain__enabled__front__default);
  /* stylelint-disable-next-line a11y/content-property-no-static-value */
  content: "";
  height: 0.5rem;
  top: 0.575rem;
  width: 0.5rem;
}

%ol-li {
  counter-increment: item;
  /* stylelint-disable-next-line a11y/content-property-no-static-value */
  &::before {
    content: counter(item) ".";
    font-weight: bold;
  }
}

ul {
  @extend %ul;
}

li {
  @extend %li;
}

ul > li::before {
  @extend %ul-li;
}

ol > li {
  @extend %ol-li;
}

// component specific selectors start here

.a-list {
  @extend %ul;

  li {
    @extend %li;
  }

  &--dot {
    li::before {
      @extend %ul-li;
    }
  }

  &--num {
    li {
      @extend %ol-li;
    }
  }

  &--check {
    li::before {
      background: none;
      border-left: 0.125rem solid var(--plain__enabled__front__default);
      border-bottom: 0.125rem solid var(--plain__enabled__front__default);
      content: "";
      display: inline-block;
      height: 0.5rem;
      left: 0;
      position: absolute;
      top: 0.125rem;
      transform-origin: bottom left;
      transform: translateX(0.3125rem) translateY(0.5rem) rotate(-45deg);
      width: 0.9375rem;
    }
  }
}