Lehigh Clutch Style Guide

List: Numbered 

<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.