<ul class="links">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
</ul>
{% if ul is not empty %}
<ul class="{{ ul.variant }}">
{% for item in ul.items %}
{% if item.items %}
<li>
Nested:
{% include '@ul' with { ul: { items: item.items } } %}
</li>
{% else %}
<li>{{ item }}</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{
"ul": {
"items": [
"<a href=\"#\">Item One</a>",
"<a href=\"#\">Item Two</a>",
"<a href=\"#\">Item Three</a>",
"<a href=\"#\">Item Four</a>"
],
"variant": "links"
}
}
ul {
&.loose {
li {
margin-bottom: rr-gridbase(2);
}
}
&.tight {
li {
margin-bottom: 0;
}
}
&.clean,
&.series,
&.piped,
&.inline,
&.links {
@include clean;
}
&.series,
&.piped,
&.inline {
li {
display: inline;
}
}
&.series {
li {
&::after {
content: ', ';
}
&:last-child {
&::after {
content: '';
}
}
}
}
&.links {
li {
&::before {
display: inline-block;
padding-right: .5rem;
font-size: rem(25px);
content: '›';
}
}
}
&.piped {
li {
&::after {
content: ' | ';
}
&:last-child {
&::after {
content: '';
}
}
}
}
&.two-column {
@include rr-break-directive(m) {
column-count: 2;
}
}
&.three-column {
@include rr-break-directive(m) {
column-count: 3;
}
}
&.two-column,
&.three-column {
@include rr-break-directive(m) {
column-gap: 3em;
li {
padding-bottom: 1px; // fix links in column lists losing underlines in Chrome, issue #505
break-inside: avoid;
}
}
}
}
.editorial__content {
ul.two-column,
ul.three-column {
margin-bottom: rem(30px);
}
}
Use the unordered list to create non-numbered, or bulleted lists of items.
The modifiers loose and tight can be used to adjust the spacing between list items.
The clean allows you to create a semantic <ul>
without the default visual styles (padding, bullets, and nesting).
Column modifiers two- and three-column can be used to split long, narrow lists into two or three columns for easier reading. This column splitting is automatic, so use these modifiers with caution - splitting a short list into columns may reduce readability rather than improve it.