City of Ghent Style Guide

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 == 'nested' %}
    <ol class="{{ modifier }}">
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
        <li> Nested List
            <ul>
                {% for item in items %}
                    <li>{{ item }}</li>
                {% endfor %}
            </ul>
        </li>
    </ol>
{% 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 == '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 %}

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

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

{% if type == 'label-list-colors' %}
  {% set colors = [
    '',
    'success',
    'warning',
    'error'
  ]
  %}
  <ul class="label-list {{ modifier }}">
    {% for key, item in items %}
      <li class="{{ colors[key] }}">{{ item }}</li>
    {% endfor %}
  </ul>
{% endif %}
<ol class="">
    <li>item 1</li>
    <li>item 2 with more words to display how a longer list item behaves</li>
    <li>item 3</li>
    <li> Nested List
        <ul>
            <li>item 1</li>
            <li>item 2 with more words to display how a longer list item behaves</li>
            <li>item 3</li>
        </ul>
    </li>
</ol>
{
  "items": [
    "item 1",
    "item 2 with more words to display how a longer list item behaves",
    "item 3"
  ],
  "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-arrow-right-top\" aria-hidden=\"true\"></i> <a href=\"https://stad.gent\">item 2 - external link</a>",
    "<i class=\"icon-arrow-right\" aria-hidden=\"true\"></i> <a href=\"#\" class=\"standalone-link\">item 3 - standalone link</a>",
    "<i class=\"icon-download\" aria-hidden=\"true\"></i> <a href=\"#\" download>item 4 - download link</a>",
    "<i class=\"icon-phone\" aria-hidden=\"true\"></i> <a href=\"tel: +32 473 58 48 30\">item 5 - tel link</a>",
    "<i class=\"icon-envelope\" aria-hidden=\"true\"></i> <a href=\"mailto:info@stad.gent\">item 6 - mail link</a>"
  ],
  "type": "nested"
}
  • Content:
    ul,
    ol {
      @include large-text();
      position: relative;
    
      ul {
        margin-left: 40px;
      }
    
      ul,
      ol {
        margin-top: 5px;
      }
    
      & > li {
        margin: 0 0 10px;
    
        &:last-child {
          margin-right: 0;
        }
      }
    
      a {
        @include normal-text;
    
        &.standalone-link {
          @include semi-bold-text;
        }
      }
    
      &.links {
        @extend %list-no-style;
      }
    
      &.inline {
        @extend %list-no-style;
    
        display: flex;
        flex-wrap: wrap;
        margin: 0;
    
        & > li {
          width: auto;
          margin-right: $gutter-width;
          margin-bottom: 0;
        }
      }
    
      &.no-style {
        max-width: 820px;
        margin: 0;
        list-style: none;
      }
    
      strong > a {
        @include semi-bold-text;
      }
    
      &.comma-separated-list {
        @extend %list-no-style;
        margin: 0;
        padding: 0;
    
        & > li {
          display: inline-block;
          margin: 0;
          padding: 0;
    
          &:not(:last-of-type)::after {
            display: inline;
            padding: 0 4px 0 0;
            content: ',';
          }
        }
    
        div {
          display: inline;
        }
      }
    }
    
    ul {
      margin-left: 20px;
      list-style-type: square;
    
      &.checkmark-list {
        @extend %list-no-style;
    
        margin-left: 0;
    
        & > li {
          @include icon('checkmark');
    
          position: relative;
          padding-left: 32px;
    
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            margin-left: -4px;
            font-size: 1.6rem;
            line-height: 110%;
          }
        }
      }
    
      &.icon-list {
        @include large-text();
    
        margin: 0 0 40px;
        list-style-type: none;
    
        &.inline {
          & > li {
            align-items: center;
            margin-right: 13px;
            margin-bottom: 0;
          }
        }
    
        & > li {
          position: relative;
          margin-bottom: 16px;
          padding-left: 29px; // 24px icon size + 5px gutter.
          line-height: 1.5;
    
          &:last-child {
            margin-bottom: 0;
          }
    
          ul {
            margin: 0;
    
            & > li {
              margin-bottom: 4px;
            }
          }
    
          a {
            padding: 0;
            line-height: inherit;
    
            &[href^="mailto:"]:not(.button),
            &[href^="tel:"]:not(.button),
            &[download]:not(.button),
            &[href^="http://"]:not(.button):not([href*="gent.be"]),
            &[href^="https://"]:not(.button):not([href*="gent.be"]) {
              &::after {
                display: none; // hide default link icons
              }
            }
          }
    
          i {
            display: block;
            position: absolute;
            left: 0;
            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";
        }
      }
    
      // @Todo: if not used anymore, replace by label atom in an inline list.
      &.label-list {
        display: flex;
        flex-wrap: wrap;
        margin: -4px;
        list-style: none;
    
        & > li {
          @include theme('background-color', 'color-none', 'tag-filter-background-color');
          @include icon('tag');
    
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          margin: 4px;
          padding: 10px 16px;
          border: 1px solid color('gray');
          font-size: .7rem;
          line-height: .7;
          text-decoration: none;
    
          &.success {
            @include theme('color', 'color-success', 'label-list-color-success');
            @include theme('border-color', 'color-success', 'label-list-color-success');
            @include theme('background-color', 'color-success-pastel--lighten-4', 'label-list-background-color-success');
          }
    
          &.warning {
            @include theme('color', 'color-warning', 'label-list-color-warning');
            @include theme('border-color', 'color-warning', 'label-list-color-warning');
            @include theme('background-color', 'color-warning--lighten-5', 'label-list-background-color-warning');
          }
    
          &.error {
            @include theme('color', 'color-error', 'label-list-color-error');
            @include theme('border-color', 'color-error', 'label-list-color-error');
            @include theme('background-color', 'color-error--lighten-5', 'label-list-background-color-error');
          }
    
          &::before {
            margin-right: 6px;
            font-size: 1rem;
          }
        }
      }
    }
    
    ol {
      list-style: none;
      counter-reset: item;
    
      & > li {
        position: relative;
        padding-left: 40px;
        counter-increment: item;
    
        &::before {
          @include theme('background-color', 'color-tertiary-pastel');
          @include semi-bold-text;
          display: inline-block;
          width: 30px;
          height: 30px;
          margin-right: 10px;
          margin-left: -40px;
          font-size: .9rem;
          line-height: 177.778%;
          text-align: center;
          content: counter(item);
        }
      }
    }
    
    @for $i from 1 through 20 {
      ol[start="#{$i}"] {
        counter-reset: item #{$i - 1};
      }
    }
    
    dl {
      dt,
      dd {
        font-family: $default-font-family;
        line-height: 1.8;
      }
    
      dt {
        @include semi-bold-text;
      }
    
      dd {
        margin-bottom: 8px;
      }
    }
    
    
    ///
    /// 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;
    
      a {
        @include semi-bold-text;
      }
    }
    
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/21-atoms/list/_list.scss
  • Size: 5.2 KB