<ul class="
list
list__columns
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 3
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 4
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
">
Lorem ipsum
</a>
</li>
</ul>
</li>
</ul>
<{{{ listTag }}}
class="
list
list__columns
{{ class }}
"
{{{ attributes }}}
>
{{#each columns }}
<{{{ ../elementTag }}}
class="
list__item
list__column
{{ this.class }}
"
>
<a
href="{{ link }}"
class="
link
{{ linkClass }}
"
{{{ linkAttributes }}}
>
{{ text }}
</a>
<{{{ ../listTag }}}
class="list"
{{{ attributes }}}
>
{{#each elements }}
<{{{ ../../elementTag }}}
class="
list__item
list__column-item
{{ this.class }}
"
>
<a
href="{{ link }}"
class="
link
{{ linkClass }}
"
{{{ linkAttributes }}}
>
{{ text }}
</a>
</{{{ ../../elementTag }}}>
{{/each }}
</{{{ ../listTag }}}>
</{{{ ../elementTag }}}>
{{/each }}
</{{{ listTag }}}>
{
"listTag": "ul",
"elementTag": "li",
"elements": [
{
"text": "Lorem ipsum"
},
{
"text": "Lorem ipsum"
},
{
"text": "Lorem ipsum"
},
{
"text": "Lorem ipsum"
},
{
"text": "Lorem ipsum"
}
],
"columns": [
{
"text": "Column 1",
"class": "list__column--hidden",
"elements": [
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
}
]
},
{
"text": "Column 2",
"class": "list__column--hidden",
"elements": [
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
}
]
},
{
"text": "Column 3",
"class": "list__column--hidden",
"elements": [
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
}
]
},
{
"text": "Column 4",
"class": "list__column--hidden",
"elements": [
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
},
{
"linkClass": "",
"text": "Lorem ipsum",
"link": "#"
}
]
}
]
}
$list__margin : 0 !default;
$list__padding : 0 !default;
$list__color : $font-color-base !default;
$list__font-size : $font-size-base !default;
$list__list-style : none !default;
$list__item-padding : 0 0 $spacer--medium !default;
$list__item-last-child-padding : inherit inherit 0 !default;
$list__label-padding : 0 $spacer $spacer 0 !default;
$list__label-after-content : ': ' !default;
$list__value-padding : 0 $spacer $spacer 0 !default;
$list__content-padding-left : $spacer !default;
// Horizontal variant
$list__item-padding--horizontal : $spacer !default;
// With Icon variant
$list__item-padding--with-icon : 0 !default;
$list__icon-link-padding--with-icon : $spacer--medium !default;
// With Image variant
$list__image-width--with-image : $spacer--medium !default;
$list__image-height--with-image : auto !default;
// Divided variant
$list__item-border-bottom--divider : 1px solid $gray-dark !default;
$list__item-padding--divider : $spacer 0 !default;
$list__item-last-child-border-bottom--divider : none !default;
$list__item-border-bottom--divider-horizontal : none !default;
$list__item-border-right--divider-horizontal : $border-base !default;
$list__item-last-child-border-right--divider-horizontal: none !default;
$list__item-padding--divider-horizontal : $spacer !default;
// Native variant
$list__item-width--native : $spacer--extra-small !default;
$list__item-height--native : $spacer--extra-small !default;
$list__item-padding--native : 0 0 $spacer calc(#{$spacer--medium - $list__item-height--native}) !default;
$list__item-background-color--native : $color-secondary !default;
$list__item-before-top--native : 30% !default;
$list__item-before-left--native : 0 !default;
// Columns variant
$list__column-padding : 0 $spacer--small 0 0 !default;
$list__column-last-child-padding : 0 !default;
$list__column-item-last-child-padding-bottom : $spacer !default;
$list__column-item-fist-child-padding-top : $spacer !default;
// Table
$list__margin--table : 0 0 $spacer !default;
$list__label-font-size--table : $font-size-medium !default;
$list__label-font-weight--table : $font-weight-bold !default;
$list__value-font-size--table : $font-size-medium !default;
$list__item-line-height--table : 32px !default;
%bullet:before {
content: "";
position: absolute;
top: $list__item-before-top--native;
left: $list__item-before-left--native;
width: $list__item-width--native;
height: $list__item-height--native;
background-color: $list__item-background-color--native;
}
@import 'list-variables';
.list {
margin: $list__margin;
padding: $list__padding;
list-style: $list__list-style;
color: $list__color;
font-size: $list__font-size;
&--center {
justify-content: center;
text-align: center;
}
&--horizontal {
display: flex;
flex-flow: row wrap;
@include mq($screen-m) {
flex-flow: row nowrap;
}
.list__item {
padding: $list__item-padding--horizontal;
&:first-child,
&:last-child {
padding: $list__item-padding--horizontal;
}
}
}
&--with-icon {
justify-content: center;
.list__item {
display: flex;
align-items: center;
padding: $list__item-padding--with-icon;
&:first-child,
&:last-child {
padding: $list__item-padding--with-icon;
}
}
.list__icon-link {
padding: $list__icon-link-padding--with-icon;
}
}
&--with-image {
.list__item {
display: flex;
}
.list__image {
width: $list__image-width--with-image;
height: $list__image-height--with-image;
}
}
&--divided {
.list__item {
border-bottom: $list__item-border-bottom--divider;
padding: $list__item-padding--divider;
&:last-child {
border-bottom: $list__item-last-child-border-bottom--divider;
}
}
&.list--horizontal {
.list__item {
border-bottom: $list__item-border-bottom--divider-horizontal;
border-right: $list__item-border-right--divider-horizontal;
padding: $list__item-padding--divider-horizontal;
&:last-child {
border-right: $list__item-last-child-border-right--divider-horizontal;
}
}
}
}
&--description {
display: inline-block;
}
&--native {
.list__item {
@extend %bullet;
position: relative;
padding: $list__item-padding--native;
}
}
&--table {
display: table;
margin: $list__margin--table;
.list__item {
display: table-row;
}
.list__label {
display: table-cell;
float: none;
font-size: $list__label-font-size--table;
font-weight: $list__label-font-weight--table;
line-height: $list__item-line-height--table;
}
.list__value {
display: table-cell;
float: none;
font-size: $list__value-font-size--table;
line-height: $list__item-line-height--table;
}
}
&--font-medium {
font-size: $font-size-medium;
}
&__item {
display: list-item;
padding: $list__item-padding;
&:last-child {
padding: $list__item-last-child-padding;
}
}
&__label {
clear: left;
float: left;
padding: $list__label-padding;
&:after {
content: $list__label-after-content;
}
}
&__value {
float: left;
padding: $list__value-padding;
}
&__content {
padding-left: $list__content-padding-left;
}
&__columns {
display: flex;
flex-direction: column;
flex-wrap: wrap;
@include mq($screen-m) {
flex-direction: row;
}
}
&__column {
padding: $list__column-padding;
&:last-child {
padding: $list__column-last-child-padding;
}
&--hidden {
& > .link {
display: none;
}
}
}
&__column-item {
&:first-child {
padding-top: $list__column-item-fist-child-padding-top;
}
&:last-child {
padding-bottom: $list__column-item-last-child-padding-bottom;
}
}
}
If the list is preceded by the title (in heading or some other element), it’s recommended to add an aria-labelledby attribute on the list and bind there the list title:
<h2 id="list-title">List title</h2>
<ul class="list" aria-labelledby="list-title">
<li class="list__item">
Lorem ipsum
</li>
<li class="list__item">
Lorem ipsum
</li>
<li class="list__item">
Lorem ipsum
</li>
<li class="list__item">
Lorem ipsum
</li>
<li class="list__item">
Lorem ipsum
</li>
</ul>