<div class="group_list">
    <h2>Resources</h2>
    <ol class="ordered-list">
        <li class="list_item">
            <span>
                <a href="#">
                    List Item 1 Nam luctus nec est vitae mattis
                </a>
            </span>
        </li><!-- end list_item -->
        <li class="list_item">
            <span>
                <a href="#">
                    List Item 2 Nam luctus nec est vitae mattis
                </a>
            </span>
        </li><!-- end list_item -->
        <li class="list_item">
            <span>
                <a href="">
                    List Item 3 Nam luctus nec est vitae mattis
                </a>
            </span>
        </li><!-- end list_item -->
        <li class="list_item">
            <span>
                <a href="#">
                    List Item 4 Nam luctus nec est vitae mattis
                </a>
            </span>
        </li><!-- end list_item -->
    </ol>
</div><!-- end group_list -->
{% set list_type = list_type ? list_type : 'ul' %}
{% set list_class = list_type == 'ol' ? 'ordered-list' : 'unordered-list' %}
<div class="group_list">
  {% block heading %}
    <h2>{{ group_list_title }}</h2>
  {% endblock heading %}
  <{{ list_type }} class="{{ list_class }}">
  {% block content %}
    {% for list_item in list_items %}
     {% include "@list_item" with list_item only %}
    {% endfor %}
  {% endblock content %}
  </{{ list_type }}>
</div><!-- end group_list -->
{
  "group_list_title": "Resources",
  "list_type": "ol",
  "list_items": {
    "1": {
      "list_item_url": "#",
      "list_item_content": "List Item 1 Nam luctus nec est vitae mattis"
    },
    "2": {
      "list_item_url": "#",
      "list_item_content": "List Item 2 Nam luctus nec est vitae mattis"
    },
    "3": {
      "list_item_content": "List Item 3 Nam luctus nec est vitae mattis"
    },
    "4": {
      "list_item_url": "#",
      "list_item_content": "List Item 4 Nam luctus nec est vitae mattis"
    }
  }
}
  • Content:
    .group_list,
    .document_list {
      margin-bottom: $space_and_half;
      margin-top: $space_and_half;
    
      .unordered-list,
      .list {
        @include reset-list-nav;
    
        .list_item {
          margin: 5px 0;
          display: flex;
          flex-wrap: nowrap;
          word-wrap: break-word;
    
          .right-content & {
            max-width: 100%;
          }
    
          p:last-child {
            margin-bottom: 0;
          }
        }
      }
    
      .ordered-list {
        @include reset-list-nav;
        list-style: none;
        counter-reset: list-number;
    
        .list_item {
          counter-increment: list-number;
          display: flex;
          flex-wrap: nowrap;
    
          &::before {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: $accent_color;
            background-color: var(--accent_color, $accent_color);
            color: $base_font;
            color: var(--base_font, $base_font);
            content: counter(list-number);
            font-weight: bold;
            padding: $space_one_half $spacer;
            font-size: 1rem;
            width: 55px;
            text-align: center;
          }
    
          .accent-lehigh_brown &,
          .accent-blue_k60 & {
            &::before {
              color: $white;
              color: var(--white, $white);
            }
          }
        }
      }
    }
    
  • URL: /components/raw/list/list.scss
  • Filesystem Path: bits/04-components/list/list.scss
  • Size: 1.2 KB

Display a styled ordered list.