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 

{% 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 %}

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


<!-- Ordered List -->
<ol class="">
      <li>item 1</li>
      <li>item 2</li>
  </ol>


<!-- Inline List -->
<ul class="inline ">
    <li>item 1</li>
    <li>item 2</li>
</ul>


<!-- List With Links -->
<ul class="">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
</ul>


<!-- List With Checkmarks -->
<ul class="checkmark-list ">
    <li>item 1</li>
    <li>item 2</li>
</ul>


<!-- List With Small Checkmarks -->
<ul class="checkmark-list-small ">
    <li>item 1</li>
    <li>item 2</li>
</ul>


<!-- List With Icons -->
<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-external-link" 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>


<!-- List With Icons Inline -->
<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>


<!-- Definition List -->
<dl class="checkmark-list ">
    <dt>item 1</dt>
    <dd>description 1</dd>
    <dt>item 2</dt>
    <dd>description 2</dd>
</dl>


<!-- Dash Separated List -->
<ul class="dash-separated-list ">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>


<!-- Label List -->
<ul class="label-list ">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>


/* Unordered List */
{
  "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>",
    "<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": "unordered"
}


/* Ordered List */
{
  "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>",
    "<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": "ordered"
}


/* Inline List */
{
  "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>",
    "<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": "inline"
}


/* List With Links */
{
  "items": [
    "<a href=\"#\">item 1</a>",
    "<a href=\"#\">item 2</a>"
  ],
  "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>",
    "<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": "links"
}


/* List With Checkmarks */
{
  "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>",
    "<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": "checkmark-list"
}


/* List With Small Checkmarks */
{
  "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>",
    "<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": "checkmark-list-small"
}


/* List With Icons */
{
  "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>",
    "<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"
}


/* List With Icons Inline */
{
  "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"
}


/* Definition List */
{
  "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>",
    "<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": "definition"
}


/* Dash Separated List */
{
  "items": [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5",
    "item 6"
  ],
  "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>",
    "<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": "dash-separated-list"
}


/* Label List */
{
  "items": [
    "item 1",
    "item 2",
    "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-external-link\" 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": "label-list"
}
  • 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;
    }
  }

  &.no-style {
    max-width: 41rem;
    margin: 0;
    list-style: none;
  }

  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;
        padding-left: 1.4rem;

        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";
    }
  }

  &.label-list {
    display: flex;
    flex-wrap: wrap;
    margin: -.2rem;
    list-style: none;

    li {
      @include theme('background-color', 'color-primary--lighten-4', 'tag-filter-background-color');

      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      margin: .2rem;
      padding: .7em .8em;
      border: 1px solid transparent;
      border-radius: border-radius('radius-1');
      font-size: .7rem;
      line-height: 1.1;
      text-decoration: none;
    }
  }
}

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;

  a {
    @include bold-text;
  }
}
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/21-atoms/list/_list.scss
  • Size: 3.4 KB