<ul class="two-column">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three is remarkably long and will probably wrap on some screens if they are small enough</li>
    <li>Item Four</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": [
      "Item One",
      "Item Two",
      "Item Three is remarkably long and will probably wrap on some screens if they are small enough",
      "Item Four"
    ],
    "variant": "two-column"
  }
}
  • 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.