<ol class="" type="1">
    <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>
</ol>
{% if ol is not empty %}
<ol class="{{ ol.variant }}" type="{{ ol.type|default(1) }}">
  {% for item in ol.items %}
    {% spaceless %}
    <li>
      {% if item.items %}
        Nested: 
        {% include '@ol' with { ol: { items: item.items, type: random(['1','a','A','i']) } } %}
      {% else %}
        {{ item }}
      {% endif %}
    </li>
    {% endspaceless %}
  {% endfor %}
</ol>
{% endif %}
{
  "ol": {
    "items": [
      "Item One",
      "Item Two",
      "Item Three is remarkably long and will probably wrap on some screens if they are small enough",
      "Item Four"
    ]
  }
}
  • Content:
    ol {
      @include rr-font-compute(r medium);
    
      &.loose {
        li {
          margin-bottom: rr-gridbase(2);
        }
      }
    
      &.tight {
        li {
          margin-bottom: 0;
        }
      }
    
      &.clean {
        @include clean;
      }
    
      &.styled-counter {
        margin-left: 0;
        list-style: none;
        counter-reset: base-counter;
    
        > li {
          position: relative;
          padding-left: 2.3em;
          counter-increment: base-counter;
    
          &::before {
            display: inline-block;
            position: absolute;
            left: 0;
            width: 2em;
            font-weight: bold;
            text-align: right;
            content: counter(base-counter) ')';
          }
        }
      }
    
      &.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 {
            break-inside: avoid;
          }
        }
      }
    }
    
    .editorial__content {
      ol.two-column,
      ol.three-column {
        margin-bottom: rem(30px);
      }
    }
    
  • URL: /components/raw/ol/ol.scss
  • Filesystem Path: patterns/atoms/lists/ol/ol.scss
  • Size: 1.1 KB

Use the ordered list to create numbered 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 <ol> without the default visual styles (padding, numerals, 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.