Davidson Styleguide

Unordered List: Nested 

<ul class="">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>
        Nested:
        <ul class="">
            <li>lorem</li>
            <li>ipsum</li>
            <li>dolor</li>
            <li>
                Nested:
                <ul class="">
                    <li>lorem</li>
                    <li>ipsum</li>
                    <li>dolor</li>
                    <li>
                        Nested:
                        <ul class="">
                            <li>lorem</li>
                            <li>ipsum</li>
                            <li>dolor</li>
                            <li>
                                Nested:
                                <ul class="">
                                    <li>lorem</li>
                                    <li>ipsum</li>
                                    <li>dolor</li>
                                </ul>
                            </li>
                            <li>amet</li>
                        </ul>
                    </li>
                    <li>amet</li>
                </ul>
            </li>
            <li>amet</li>
        </ul>
    </li>
    <li>amet</li>
</ul>
 
{% if ul is not empty %}
<ul class="{{ ul.variant }}">
  {% for item in ul.items %}
    {% if item.items %}
      <li>
        Nested: 
        {% include '@ul' with { ul: { items: item.items } } %}
      </li>
    {% else %}
      <li>{{ item }}</li>
    {% endif %}
  {% endfor %}
</ul>
{% endif %}
 
{
  "ul": {
    "items": [
      "lorem",
      "ipsum",
      "dolor",
      {
        "items": [
          "lorem",
          "ipsum",
          "dolor",
          {
            "items": [
              "lorem",
              "ipsum",
              "dolor",
              {
                "items": [
                  "lorem",
                  "ipsum",
                  "dolor",
                  {
                    "items": [
                      "lorem",
                      "ipsum",
                      "dolor"
                    ]
                  },
                  "amet"
                ]
              },
              "amet"
            ]
          },
          "amet"
        ]
      },
      "amet"
    ]
  }
}
  • Content: 
    ul {
  &.loose {
    li {
      margin-bottom: rr-gridbase(2);
    }
  }

  &.tight {
    li {
      margin-bottom: 0;
    }
  }

  &.clean,
  &.series,
  &.piped,
  &.inline,
  &.links {
    @include clean;
  }

  &.series,
  &.piped,
  &.inline {
    li {
      display: inline;
    }
  }

  &.series {
    li {
      &::after {
        content: ', ';
      }

      &:last-child {
        &::after {
          content: '';
        }
      }
    }
  }

  &.links {
    li {
      &::before {
        display: inline-block;
        padding-right: .5rem;
        font-size: rem(25px);
        content: '›';
      }
    }
  }

  &.piped {
    li {
      &::after {
        content: ' | ';
      }

      &:last-child {
        &::after {
          content: '';
        }
      }
    }
  }

  &.two-column {
    @include rr-break-directive(m) {
      column-count: 2;
    }
  }

  &.three-column {
    @include rr-break-directive(m) {
      column-count: 3;
    }
  }

  &.two-column,
  &.three-column {
    @include rr-break-directive(m) {
      column-gap: 3em;

      li {
        padding-bottom: 1px; // fix links in column lists losing underlines in Chrome, issue #505
        break-inside: avoid;
      }
    }
  }
}

.editorial__content {
  ul.two-column,
  ul.three-column {
    margin-bottom: rem(30px);
  }
}
  • URL: /components/raw/ul/ul.scss
  • Filesystem Path: patterns/atoms/lists/ul/ul.scss
  • Size: 1.3 KB

Use the unordered list to create non-numbered, or bulleted lists of items.

The modifiers loose and tight can be used to adjust the spacing between list items.

The clean allows you to create a semantic <ul> without the default visual styles (padding, bullets, and nesting).

Column modifiers two- and three-column can be used to split long, narrow lists into two or three columns for easier reading. This column splitting is automatic, so use these modifiers with caution - splitting a short list into columns may reduce readability rather than improve it.