No notes defined.
<ol>
<li>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>
<li>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li>
<li>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>Double digit</li>
<li>Double digits</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry</li>
<li>Double digits with a bit more copy</li>
</ol>
<ol>
<li>
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<ol>
<li>Double digit</li>
<li>Double digits</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry</li>
<li>
Double digits with a bit more copy
<ol>
<li>Double digit</li>
<li>Double digits</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry</li>
<li>Double digits with a bit more copy</li>
</ol>
</li>
</ol>
</li>
<li>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</li>
<li>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</li>
</ol>
<ol>
<li>
<p>{{ lorem }}</p>
</li>
<li>
<p>{{ loremShort }}</p>
</li>
<li>
<p>{{ lorem }}</p>
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
<li>Double digit</li>
<li>Double digits</li>
<li>{{ loremShort }}</li>
<li>Double digits with a bit more copy</li>
</ol>
<ol>
<li>
{{ lorem }}
<ol>
<li>Double digit</li>
<li>Double digits</li>
<li>{{ loremShort }}</li>
<li>
Double digits with a bit more copy
<ol>
<li>Double digit</li>
<li>Double digits</li>
<li>{{ loremShort }}</li>
<li>Double digits with a bit more copy</li>
</ol>
</li>
</ol>
</li>
<li>
<p>{{ loremShort }}</p>
</li>
<li>
<p>{{ lorem }}</p>
</li>
</ol>
.list--spaced {
> li {
margin-bottom: 1rem;
}
}
.list--unstyled {
list-style: none;
padding-inline-start: 0;
}
.list--inline {
list-style: none;
padding-inline-start: 0;
> li {
display: inline-block;
margin-right: $spacing-md;
}
}
.list--tags {
list-style: none;
padding-inline-start: 0;
> li {
display: inline-block;
}
}
.list--inline-icons {
list-style: none;
padding-inline-start: 0;
> li {
display: inline-block;
margin-right: $spacing-2xs;
}
a {
display: block;
}
}
.list--piped {
list-style: none;
padding-inline-start: 0;
> li {
display: inline-block;
&::before {
content: '|';
padding-inline-end: $spacing-xs;
}
&:first-child {
&::before {
display: none;
}
}
}
}
.list--item-border {
list-style: none;
padding: 0;
> li {
padding: 0 0 $spacing-sm;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg,
rgba($grey--lightest, 1) 80%,
rgba($grey--lightest, 0) 100%,
) 1; // NB: the '1' here is not a typo, it is critical for border-slice!
.tag {
margin-bottom: 0;
}
}
}
.list--icon-bullets {
list-style: none;
padding: 0;
li {
display: flex;
align-content: flex-start;
justify-content: flex-start;
> * {
flex: 1 1 auto;
}
}
.icon {
flex: 0 0 1em;
height: 1em;
margin: 0.1em 0.5em 0.1em 0;
}
a {
color: var(--text-color, $text-color);
}
}
.list--icon-bullets--big {
> li {
margin-bottom: $spacing-md;
}
.icon {
font-size: 1.5em;
margin-top: -0.1em;
}
}
.list--arrow-bullets {
padding-inline-start: 0;
max-width: calc(#{$line-length-max-rem} - 1.5em); // subtract base ul left hand padding to match p width
margin-bottom: $spacing-3xl;
@include line-height('normal');
> li {
list-style-type: none;
padding-left: 1.5em;
margin-bottom: $spacing-sm;
&::before {
content: '';
display: block;
float: left;
margin: 0.3em 0.5em 0 -1.5em;
width: 1em;
height: 1em;
background: no-repeat left center / 90% 90% url('#{$assets-directory}/img/rarr-secondary.svg');
}
a {
&:only-child {
display: block;
text-decoration: none;
color: var(--text-color, #{$text-color});
&:hover,
&:focus-visible {
text-decoration: underline;
}
}
}
}
}
.list--columns,
.list--columns-wide {
max-width: none;
column-gap: $grid-gutter;
@media (min-width: 10em) {
columns: 15em;
}
@media (min-width: 35em) {
columns: 18em;
}
@media (min-width: 40em) {
columns: 20em;
}
> li {
display: inline-table; // counteracts overflowing columns
margin: 0;
break-inside: avoid-column;
box-sizing: border-box;
width: 100%;
}
&.list--item-border {
> li {
padding-top: $spacing-xs;
padding-bottom: $spacing-xs;
}
}
}
.list--columns-wide {
@media (min-width: 10em) {
columns: 18em;
}
@media (min-width: 35em) {
columns: 20em;
}
@media (min-width: 60em) {
columns: 28em;
}
}