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 == '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 %}
<ul class="inline ">
<li>item 1</li>
<li>item 2</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>",
"<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"
}
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;
}
}