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