<h4>With classes</h4>
<ul class="list list--unordered list__level-0">
<li class="list__item">
<span class="list__item-content">List Item One</span>
</li>
<li class="list__item"><span class="list__item-content">List Item Two</span></li>
<li class="list__item">
<span class="list__item-content">List Item Three</span>
<ul class="list list__sublist list--unordered list__level-1">
<li class="list__item"><span class="list__item-content">List Item One</span></li>
<li class="list__item"><span class="list__item-content">List Item Two</span></li>
</ul>
</li>
</ul>
<h4>Without classes</h4>
<ul class="list">
<li>List Item One</li>
<li>List Item Two</li>
<li>
List Item Three
<ul class="list">
<li>List Item One</li>
<li>List Item Two</li>
</ul>
</li>
</ul>
.list {
width: 100%;
list-style: none;
padding: 0;
margin: 0 0 $grid-gutter-width 0;
font-size: $font-size-root;
color: $primary;
& > li > ul,
& > li > ol,
&__sublist {
margin-top: $grid-gutter-width/2;
padding-left: $grid-gutter-width;
}
li,
&__item {
position: relative;
margin-bottom: $grid-gutter-width / 2;
&::before {
position: absolute;
left: 0;
top: 1px;
}
}
&--items {
border-radius: $border-radius;
overflow: hidden;
.list {
&__item {
background: $gray-light;
transition: 0.3s;
margin-bottom: 0;
padding: 15px 22px;
p {
margin: 0;
}
&--linked {
&:hover {
background: darken($gray-light, 10);
}
}
&:not(:hover) {
.icon__animated-part {
animation: none;
}
}
&:not(:last-child) {
margin-bottom: 1px;
}
}
&__link {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
}
// Unordered list styles
ul.list,
.list--unordered {
li,
.list__item {
padding-left: $grid-gutter-width;
&:before {
content: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.137.777a.469.469 0 01.59-.723L.8.114l6.7 6.7a.937.937 0 01.081 1.233L7.5 8.14l-6.7 6.7a.469.469 0 01-.723-.59l.06-.073 6.7-6.7-6.7-6.7z' fill='%230E2249' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
left: 2px;
flex-shrink: 0;
width: 8px;
height: 15px;
}
}
.list__item-content {
max-width: calc(100% - 18px);
}
}
x
// Ordered list styles
ol.list,
.list--ordered, .list--check {
counter-reset: counter;
li,
.list__item {
padding-left: $grid-gutter-width * 1.5;
counter-increment: counter;
&:before {
content: counter(counter);
width: 21px;
height: 21px;
display: flex;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: 100%;
justify-content: center;
align-items: center;
color: $primary;
line-height: 1em;
font-size: $font-size-sm;
}
}
}
.list--check {
li,
.list__item {
padding-left: $grid-gutter-width * 1.5 !important ;
&:before {
content:"" !important;
background-image: url("data:image/svg+xml,%3csvg width='10px' height='7px' viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='List-Item-/-Unordered-/-Check-' transform='translate(-2.000000%2c -8.000000)' fill='%230E2249' fill-rule='nonzero'%3e%3cg id='Icon-/-Check' transform='translate(-0.500000%2c 4.500000)'%3e%3cpath d='M10.7496226%2c4.15995393 C10.9134125%2c3.937631 11.2264188%2c3.89018058 11.4487417%2c4.05397045 C11.6710647%2c4.21776033 11.7185151%2c4.53076661 11.5547252%2c4.75308954 L7.67164919%2c10.0238471 C7.49174003%2c10.2687454 7.21919692%2c10.4290648 6.91811005%2c10.4672778 C6.62086136%2c10.5052314 6.320908%2c10.4212445 6.08602702%2c10.2340036 L3.53559224%2c8.19487315 C3.31991106%2c8.02243115 3.28485878%2c7.70779516 3.45730077%2c7.49211398 C3.62974276%2c7.2764328 3.94437876%2c7.24138051 4.16005993%2c7.41382251 L6.70993343%2c9.45250484 C6.73290595%2c9.47081786 6.76231314%2c9.47905187 6.79182907%2c9.47528333 C6.82138405%2c9.4715323 6.84810396%2c9.4558147 6.86614437%2c9.43125828 L10.7496226%2c4.15995393 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") !important;
background-repeat: no-repeat;
background-position: center;
width: 15px !important;
padding-bottom: 3px !important;
margin-top: 3px !important;
}
}
}
<ul class="list list--check list__level-0">
<li class="list__item">
<span class="list__item-content">List Item One</span>
</li>
<li class="list__item"><span class="list__item-content">List Item Two</span></li>
<li class="list__item">
<span class="list__item-content">List Item Three</span>
<ul class="list list__sublist list--check list__level-1">
<li class="list__item"><span class="list__item-content">List Item One</span></li>
<li class="list__item"><span class="list__item-content">List Item Two</span></li>
</ul>
</li>
</ul>
.list {
width: 100%;
list-style: none;
padding: 0;
margin: 0 0 $grid-gutter-width 0;
font-size: $font-size-root;
color: $primary;
& > li > ul,
& > li > ol,
&__sublist {
margin-top: $grid-gutter-width/2;
padding-left: $grid-gutter-width;
}
li,
&__item {
position: relative;
margin-bottom: $grid-gutter-width / 2;
&::before {
position: absolute;
left: 0;
top: 1px;
}
}
&--items {
border-radius: $border-radius;
overflow: hidden;
.list {
&__item {
background: $gray-light;
transition: 0.3s;
margin-bottom: 0;
padding: 15px 22px;
p {
margin: 0;
}
&--linked {
&:hover {
background: darken($gray-light, 10);
}
}
&:not(:hover) {
.icon__animated-part {
animation: none;
}
}
&:not(:last-child) {
margin-bottom: 1px;
}
}
&__link {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
}
// Unordered list styles
ul.list,
.list--unordered {
li,
.list__item {
padding-left: $grid-gutter-width;
&:before {
content: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.137.777a.469.469 0 01.59-.723L.8.114l6.7 6.7a.937.937 0 01.081 1.233L7.5 8.14l-6.7 6.7a.469.469 0 01-.723-.59l.06-.073 6.7-6.7-6.7-6.7z' fill='%230E2249' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
left: 2px;
flex-shrink: 0;
width: 8px;
height: 15px;
}
}
.list__item-content {
max-width: calc(100% - 18px);
}
}
x
// Ordered list styles
ol.list,
.list--ordered, .list--check {
counter-reset: counter;
li,
.list__item {
padding-left: $grid-gutter-width * 1.5;
counter-increment: counter;
&:before {
content: counter(counter);
width: 21px;
height: 21px;
display: flex;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: 100%;
justify-content: center;
align-items: center;
color: $primary;
line-height: 1em;
font-size: $font-size-sm;
}
}
}
.list--check {
li,
.list__item {
padding-left: $grid-gutter-width * 1.5 !important ;
&:before {
content:"" !important;
background-image: url("data:image/svg+xml,%3csvg width='10px' height='7px' viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='List-Item-/-Unordered-/-Check-' transform='translate(-2.000000%2c -8.000000)' fill='%230E2249' fill-rule='nonzero'%3e%3cg id='Icon-/-Check' transform='translate(-0.500000%2c 4.500000)'%3e%3cpath d='M10.7496226%2c4.15995393 C10.9134125%2c3.937631 11.2264188%2c3.89018058 11.4487417%2c4.05397045 C11.6710647%2c4.21776033 11.7185151%2c4.53076661 11.5547252%2c4.75308954 L7.67164919%2c10.0238471 C7.49174003%2c10.2687454 7.21919692%2c10.4290648 6.91811005%2c10.4672778 C6.62086136%2c10.5052314 6.320908%2c10.4212445 6.08602702%2c10.2340036 L3.53559224%2c8.19487315 C3.31991106%2c8.02243115 3.28485878%2c7.70779516 3.45730077%2c7.49211398 C3.62974276%2c7.2764328 3.94437876%2c7.24138051 4.16005993%2c7.41382251 L6.70993343%2c9.45250484 C6.73290595%2c9.47081786 6.76231314%2c9.47905187 6.79182907%2c9.47528333 C6.82138405%2c9.4715323 6.84810396%2c9.4558147 6.86614437%2c9.43125828 L10.7496226%2c4.15995393 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") !important;
background-repeat: no-repeat;
background-position: center;
width: 15px !important;
padding-bottom: 3px !important;
margin-top: 3px !important;
}
}
}
<h4>With classes</h4>
<ol class="list list--ordered list__level-0">
<li class="list__item"><span class="list__item-content">List Item One</span></li>
<li class="list__item"><span class="list__item-content">List Item Two</span></li>
<li class="list__item">
<span class="list__item-content">List Item Three</span>
<ol class="list list__sublist list--ordered list__level-1">
<li class="list__item"><span class="list__item-content">List Item One</span></li>
<li class="list__item"><span class="list__item-content">List Item Two</span></li>
</ol>
</li>
</ol>
<h4>Without classes</h4>
<ol class="list">
<li>List Item One</li>
<li>List Item Two</li>
<li>
List Item
<ol class="list">
<li>List Item One</li>
<li>List Item Two</li>
</ol>
</li>
</ol>
.list {
width: 100%;
list-style: none;
padding: 0;
margin: 0 0 $grid-gutter-width 0;
font-size: $font-size-root;
color: $primary;
& > li > ul,
& > li > ol,
&__sublist {
margin-top: $grid-gutter-width/2;
padding-left: $grid-gutter-width;
}
li,
&__item {
position: relative;
margin-bottom: $grid-gutter-width / 2;
&::before {
position: absolute;
left: 0;
top: 1px;
}
}
&--items {
border-radius: $border-radius;
overflow: hidden;
.list {
&__item {
background: $gray-light;
transition: 0.3s;
margin-bottom: 0;
padding: 15px 22px;
p {
margin: 0;
}
&--linked {
&:hover {
background: darken($gray-light, 10);
}
}
&:not(:hover) {
.icon__animated-part {
animation: none;
}
}
&:not(:last-child) {
margin-bottom: 1px;
}
}
&__link {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
}
// Unordered list styles
ul.list,
.list--unordered {
li,
.list__item {
padding-left: $grid-gutter-width;
&:before {
content: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.137.777a.469.469 0 01.59-.723L.8.114l6.7 6.7a.937.937 0 01.081 1.233L7.5 8.14l-6.7 6.7a.469.469 0 01-.723-.59l.06-.073 6.7-6.7-6.7-6.7z' fill='%230E2249' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
left: 2px;
flex-shrink: 0;
width: 8px;
height: 15px;
}
}
.list__item-content {
max-width: calc(100% - 18px);
}
}
x
// Ordered list styles
ol.list,
.list--ordered, .list--check {
counter-reset: counter;
li,
.list__item {
padding-left: $grid-gutter-width * 1.5;
counter-increment: counter;
&:before {
content: counter(counter);
width: 21px;
height: 21px;
display: flex;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: 100%;
justify-content: center;
align-items: center;
color: $primary;
line-height: 1em;
font-size: $font-size-sm;
}
}
}
.list--check {
li,
.list__item {
padding-left: $grid-gutter-width * 1.5 !important ;
&:before {
content:"" !important;
background-image: url("data:image/svg+xml,%3csvg width='10px' height='7px' viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='List-Item-/-Unordered-/-Check-' transform='translate(-2.000000%2c -8.000000)' fill='%230E2249' fill-rule='nonzero'%3e%3cg id='Icon-/-Check' transform='translate(-0.500000%2c 4.500000)'%3e%3cpath d='M10.7496226%2c4.15995393 C10.9134125%2c3.937631 11.2264188%2c3.89018058 11.4487417%2c4.05397045 C11.6710647%2c4.21776033 11.7185151%2c4.53076661 11.5547252%2c4.75308954 L7.67164919%2c10.0238471 C7.49174003%2c10.2687454 7.21919692%2c10.4290648 6.91811005%2c10.4672778 C6.62086136%2c10.5052314 6.320908%2c10.4212445 6.08602702%2c10.2340036 L3.53559224%2c8.19487315 C3.31991106%2c8.02243115 3.28485878%2c7.70779516 3.45730077%2c7.49211398 C3.62974276%2c7.2764328 3.94437876%2c7.24138051 4.16005993%2c7.41382251 L6.70993343%2c9.45250484 C6.73290595%2c9.47081786 6.76231314%2c9.47905187 6.79182907%2c9.47528333 C6.82138405%2c9.4715323 6.84810396%2c9.4558147 6.86614437%2c9.43125828 L10.7496226%2c4.15995393 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") !important;
background-repeat: no-repeat;
background-position: center;
width: 15px !important;
padding-bottom: 3px !important;
margin-top: 3px !important;
}
}
}
<div class="list list--items">
<div class="list__item list__item--linked row align-items-center">
<a href="javascript:void(0)" class="list__link"> </a>
<div class="col">
<p class="text--extra-large">
Headline
</p>
<small class="text--small">Metadata</small>
</div>
<div class="col-auto">
<svg
class="icon icon--download"
width="26"
height="26"
version="1.1"
id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 26 26"
style="enable-background: new 0 0 26 26"
xml:space="preserve"
>
<path
id="Path"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
d="M25,19.8v2.1
c0,1.7-1.4,3.1-3.1,3.1H4.1C2.4,25,1,23.6,1,21.9v-2.1"
/>
<g class="icon__animated-part">
<line
id="Path_00000129199243895298370970000016192969745167643291_"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
x1="13"
y1="19.7"
x2="13"
y2="1"
/>
<polyline
id="Path_00000031188190714291126470000006245885166271926146_"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
points="
20.6,12 13,19.7 5.4,12 "
/>
</g>
</svg>
</div>
</div>
<div class="list__item list__item--linked row align-items-center">
<a href="javascript:void(0)" class="list__link"> </a>
<div class="col">
<p class="text--extra-large">
Headline
</p>
<small class="text--small">Metadata</small>
</div>
<div class="col-auto">
<svg
class="icon icon--download"
width="26"
height="26"
version="1.1"
id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 26 26"
style="enable-background: new 0 0 26 26"
xml:space="preserve"
>
<path
id="Path"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
d="M25,19.8v2.1
c0,1.7-1.4,3.1-3.1,3.1H4.1C2.4,25,1,23.6,1,21.9v-2.1"
/>
<g class="icon__animated-part">
<line
id="Path_00000129199243895298370970000016192969745167643291_"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
x1="13"
y1="19.7"
x2="13"
y2="1"
/>
<polyline
id="Path_00000031188190714291126470000006245885166271926146_"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
points="
20.6,12 13,19.7 5.4,12 "
/>
</g>
</svg>
</div>
</div>
<div class="list__item list__item--linked row align-items-center">
<a href="javascript:void(0)" class="list__link"> </a>
<div class="col">
<p class="text--extra-large">
Headline
</p>
<small class="text--small">Metadata</small>
</div>
<div class="col-auto">
<svg
class="icon icon--download"
width="26"
height="26"
version="1.1"
id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 26 26"
style="enable-background: new 0 0 26 26"
xml:space="preserve"
>
<path
id="Path"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
d="M25,19.8v2.1
c0,1.7-1.4,3.1-3.1,3.1H4.1C2.4,25,1,23.6,1,21.9v-2.1"
/>
<g class="icon__animated-part">
<line
id="Path_00000129199243895298370970000016192969745167643291_"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
x1="13"
y1="19.7"
x2="13"
y2="1"
/>
<polyline
id="Path_00000031188190714291126470000006245885166271926146_"
style="fill: none; stroke: #000000; stroke-linecap: round; stroke-linejoin: round"
points="
20.6,12 13,19.7 5.4,12 "
/>
</g>
</svg>
</div>
</div>
</div>
.list {
width: 100%;
list-style: none;
padding: 0;
margin: 0 0 $grid-gutter-width 0;
font-size: $font-size-root;
color: $primary;
& > li > ul,
& > li > ol,
&__sublist {
margin-top: $grid-gutter-width/2;
padding-left: $grid-gutter-width;
}
li,
&__item {
position: relative;
margin-bottom: $grid-gutter-width / 2;
&::before {
position: absolute;
left: 0;
top: 1px;
}
}
&--items {
border-radius: $border-radius;
overflow: hidden;
.list {
&__item {
background: $gray-light;
transition: 0.3s;
margin-bottom: 0;
padding: 15px 22px;
p {
margin: 0;
}
&--linked {
&:hover {
background: darken($gray-light, 10);
}
}
&:not(:hover) {
.icon__animated-part {
animation: none;
}
}
&:not(:last-child) {
margin-bottom: 1px;
}
}
&__link {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
}
// Unordered list styles
ul.list,
.list--unordered {
li,
.list__item {
padding-left: $grid-gutter-width;
&:before {
content: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.137.777a.469.469 0 01.59-.723L.8.114l6.7 6.7a.937.937 0 01.081 1.233L7.5 8.14l-6.7 6.7a.469.469 0 01-.723-.59l.06-.073 6.7-6.7-6.7-6.7z' fill='%230E2249' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
left: 2px;
flex-shrink: 0;
width: 8px;
height: 15px;
}
}
.list__item-content {
max-width: calc(100% - 18px);
}
}
x
// Ordered list styles
ol.list,
.list--ordered, .list--check {
counter-reset: counter;
li,
.list__item {
padding-left: $grid-gutter-width * 1.5;
counter-increment: counter;
&:before {
content: counter(counter);
width: 21px;
height: 21px;
display: flex;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: 100%;
justify-content: center;
align-items: center;
color: $primary;
line-height: 1em;
font-size: $font-size-sm;
}
}
}
.list--check {
li,
.list__item {
padding-left: $grid-gutter-width * 1.5 !important ;
&:before {
content:"" !important;
background-image: url("data:image/svg+xml,%3csvg width='10px' height='7px' viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='List-Item-/-Unordered-/-Check-' transform='translate(-2.000000%2c -8.000000)' fill='%230E2249' fill-rule='nonzero'%3e%3cg id='Icon-/-Check' transform='translate(-0.500000%2c 4.500000)'%3e%3cpath d='M10.7496226%2c4.15995393 C10.9134125%2c3.937631 11.2264188%2c3.89018058 11.4487417%2c4.05397045 C11.6710647%2c4.21776033 11.7185151%2c4.53076661 11.5547252%2c4.75308954 L7.67164919%2c10.0238471 C7.49174003%2c10.2687454 7.21919692%2c10.4290648 6.91811005%2c10.4672778 C6.62086136%2c10.5052314 6.320908%2c10.4212445 6.08602702%2c10.2340036 L3.53559224%2c8.19487315 C3.31991106%2c8.02243115 3.28485878%2c7.70779516 3.45730077%2c7.49211398 C3.62974276%2c7.2764328 3.94437876%2c7.24138051 4.16005993%2c7.41382251 L6.70993343%2c9.45250484 C6.73290595%2c9.47081786 6.76231314%2c9.47905187 6.79182907%2c9.47528333 C6.82138405%2c9.4715323 6.84810396%2c9.4558147 6.86614437%2c9.43125828 L10.7496226%2c4.15995393 Z' id='Path'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") !important;
background-repeat: no-repeat;
background-position: center;
width: 15px !important;
padding-bottom: 3px !important;
margin-top: 3px !important;
}
}
}