List: List With Icons Inline

List

When to use this component

A list is an organized set of items that convey information. A list must always consist of two or more items.

When to not use this component

A list cannot be used for a single item.

How it works

A list organizes information. There are two types of lists:

  • Odered list: To display information in some ranking or hierarchy.
  • Unordered list: To display information with no specific order.
{% if type == 'ordered' %}
  <ol class="{{ modifier }}">
      {% for item in items %}
          <li>{{ item }}</li>
      {% endfor %}
  </ol>
{% endif %}

{% if type == 'unordered' %}
  <ul class="{{ modifier }}">
      {% for item in items %}
          <li>{{ item }}</li>
      {% endfor %}
  </ul>
{% endif %}

{% if type == 'inline' %}
  <ul class="inline {{ modifier }}">
      {% for item in items %}
          <li>{{ item }}</li>
      {% endfor %}
  </ul>
{% endif %}

{% if type == 'links' %}
  <ul class="{{ modifier }}">
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
  </ul>
{% endif %}

{% if type == 'checkmark-list' %}
  <ul class="checkmark-list {{ modifier }}">
      {% for item in items %}
          <li>{{ item }}</li>
      {% endfor %}
  </ul>
{% endif %}

{% if type == 'checkmark-list-small' %}
  <ul class="checkmark-list-small {{ modifier }}">
      {% for item in items %}
          <li>{{ item }}</li>
      {% endfor %}
  </ul>
{% endif %}

{% if type == 'icon-list' %}
  <ul class="icon-list {{ modifier }}">
      {% for item in icon_items %}
          <li>{{ item }}</li>
      {% endfor %}
  </ul>
{% endif %}

{% if type == 'definition' %}
  <dl class="checkmark-list {{ modifier }}">
      {% for key, item in items %}
          <dt>{{ item  }}</dt>
          <dd>{{ definitions[key] }}</dd>
      {% endfor %}
  </dl>
{% endif %}

{% if type == 'dash-separated-list' %}
  <ul class="dash-separated-list {{ modifier }}">
      {% for key, item in items %}
        <li>{{ item }}</li>
      {% endfor %}
  </ul>
{% endif %}
<ul class="icon-list inline">
    <li><i class="icon-home" aria-hidden="true"></i> item 1</li>
    <li><i class="icon-home" aria-hidden="true"></i> item 2</li>
    <li><i class="icon-external-link" aria-hidden="true"></i> <a href="https://stad.gent">item 2 - external link</a></li>
</ul>
{
  "items": [
    "item 1",
    "item 2"
  ],
  "definitions": [
    "description 1",
    "description 2"
  ],
  "icon_items": [
    "<i class=\"icon-home\" aria-hidden=\"true\"></i> item 1",
    "<i class=\"icon-home\" aria-hidden=\"true\"></i> item 2",
    "<i class=\"icon-external-link\" aria-hidden=\"true\"></i> <a href=\"https://stad.gent\">item 2 - external link</a>"
  ],
  "type": "icon-list",
  "modifier": "inline"
}
  • Content:
    ul,
    ol {
      position: relative;
      margin-left: 1rem;
    
      li,
      li > a {
        font-family: $default-font-family;
        line-height: 2.1;
      }
    
      &.links {
        @extend %list-no-style;
      }
    
      &.inline {
        @extend %list-no-style;
    
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    
        li {
          width: auto;
          margin-right: $gutter-width;
        }
      }
    
      a {
        font-weight: normal;
      }
    
      strong > a {
        @include bold-text;
      }
    }
    
    ul {
      &.checkmark-list,
      &.checkmark-list-small {
        @extend %list-no-style;
    
        margin-left: 0;
    
        li {
          @include icon('checkmark');
    
          position: relative;
          padding-left: 1.6em;
    
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            margin-left: -.2em;
            font-size: 1.6rem;
            line-height: 1.1;
          }
        }
      }
    
      &.checkmark-list-small {
        li {
          font-size: .8rem;
          line-height: 2.4;
    
          &::before {
            font-size: 1.2rem;
            line-height: 1.7;
          }
        }
      }
    
      &.icon-list {
        margin: 0 0 2rem;
        list-style-type: none;
    
        &.inline {
          li {
            display: flex;
            align-items: center;
            margin-right: .7rem;
            margin-bottom: 0;
    
            i {
              width: auto;
              margin-right: .2rem;
            }
          }
        }
    
        li {
          position: relative;
          margin-bottom: .8rem;
          padding-left: 1.6rem;
          line-height: 1.5;
    
          &:last-child {
            margin-bottom: 0;
          }
    
          ul {
            margin: 0;
    
            li {
              margin-bottom: .2rem;
            }
          }
    
          a {
            padding: 0;
            line-height: inherit;
    
            &[href^="mailto:"]:not(.button),
            &[href^="tel:"]:not(.button),
            &[download]:not(.button),
            &[href^="http://"]:not(.button),
            &[href^="https://"]:not(.button) {
              &::after {
                display: none; // hide default link icons
              }
            }
          }
    
          i {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 1.5em;
            line-height: 1;
          }
        }
      }
    
      &.dash-separated-list {
        @extend %list-no-style;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    
        > li:not(:last-of-type)::after {
          display: inline-block;
          padding: 0 .2em;
          content: "\2014";
        }
      }
    }
    
    dl {
      dt,
      dd {
        font-family: $default-font-family;
        line-height: 1.8;
      }
    
      dt {
        @include bold-text;
      }
    
      dd {
        margin-bottom: .4rem;
        padding-left: 1.2rem;
      }
    }
    
    
    ///
    /// Remove default styling from a list.
    ///
    /// @since 3.0.0
    /// @access public
    /// @author Gert-Jan Meire
    ///
    %list-no-style {
      margin-left: 0;
      padding-left: 0;
      list-style: none;
    
      p {
        font-size: .8rem;
      }
    
      a {
        @include bold-text;
      }
    }
    
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/21-atoms/list/_list.scss
  • Size: 2.8 KB