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.

List: List With Icons 

{% 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 %}
 
<ul class="icon-list ">
    <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-arrow-right-top" aria-hidden="true"></i> <a href="https://stad.gent">item 2 - external link</a></li>
    <li><i class="icon-arrow-right" aria-hidden="true"></i> <a href="#" class="standalone-link">item 3 - standalone link</a></li>
    <li><i class="icon-download" aria-hidden="true"></i> <a href="#" download>item 4 - download link</a></li>
    <li><i class="icon-phone" aria-hidden="true"></i> <a href="tel: +32 473 58 48 30">item 5 - tel link</a></li>
    <li><i class="icon-envelope" aria-hidden="true"></i> <a href="mailto:info@stad.gent">item 6 - mail link</a></li>
</ul>
 
{
  "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": "icon-list"
}
  • 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