A list is an organized set of items that convey information. A list must always consist of two or more items.
A list cannot be used for a single item.
A list organizes information. There are two types of lists:
{% 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 %}
<!-- Unordered List -->
<ul class="">
<li>item 1</li>
<li>item 2 with more words to display how a longer list item behaves</li>
<li>item 3</li>
</ul>
<!-- Ordered List -->
<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>
</ol>
<!-- Nested Lists -->
<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>
<!-- Inline List -->
<ul class="inline ">
<li>item 1</li>
<li>item 2 with more words to display how a longer list item behaves</li>
<li>item 3</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 with more words to display how a longer list item behaves</li>
<li>item 3</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-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>
<!-- 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-arrow-right-top" 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 with more words to display how a longer list item behaves</dt>
<dd>description 2</dd>
<dt>item 3</dt>
<dd></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>
<!-- Comma Separated List -->
<ul class="comma-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>
<!-- Label List With Colors -->
<ul class="label-list ">
<li class="">item 1</li>
<li class="success">item 2</li>
<li class="warning">item 3</li>
<li class="error">item 4</li>
</ul>
/* Unordered List */
{
"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": "unordered"
}
/* Ordered List */
{
"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": "ordered"
}
/* Nested Lists */
{
"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"
}
/* Inline List */
{
"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": "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-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": "links"
}
/* List With Checkmarks */
{
"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": "checkmark-list"
}
/* List With Icons */
{
"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"
}
/* List With Icons Inline */
{
"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>"
],
"type": "icon-list",
"modifier": "inline"
}
/* Definition List */
{
"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": "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-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": "dash-separated-list"
}
/* Comma 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-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": "comma-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-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": "label-list"
}
/* Label List With Colors */
{
"items": [
"item 1",
"item 2",
"item 3",
"item 4"
],
"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": "label-list-colors"
}
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;
}
}