<div class="bux-listicle">
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">1</span>
<span class="bux-listicle__title-text">Title of Unordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">2</span>
<span class="bux-listicle__title-text">Title of Unordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="bux-listicle__item bux-listicle__item--unordered ">
<h2 class="bux-listicle__title">
<span class="bux-listicle__title-number">3</span>
<span class="bux-listicle__title-text">Title of Unordered Listicle Item</span>
</h2>
<div class="bux-listicle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
{#
Listicle
Available variables:
- modifier: Sets the listicle variant. Either null or unordered.
- heading_level: Integer. Sets the listicle title heading level.
- items: Array of listicle items.
- item.title: Title of the listicle item.
- item.text: Content for the listicle item.
#}
<div class="bux-listicle">
{% for item in items %}
<div class="bux-listicle__item {% if modifier %} bux-listicle__item--{{modifier}} {% endif %}">
<h{{heading_level|default(2)}} class="bux-listicle__title">
<span class="bux-listicle__title-number">{{ loop.index }}</span>
<span class="bux-listicle__title-text">{{ item.title }}</span>
</h{{heading_level|default(2)}}>
<div class="bux-listicle__text">{{ item.text }}</div>
</div>
{% endfor %}
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
items:
- title: Title of Unordered Listicle Item
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
- title: Title of Unordered Listicle Item
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
- title: Title of Unordered Listicle Item
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
modifier: unordered
.bux-listicle__item {
margin-bottom: $sp-32;
&:last-child {
margin-bottom: 0;
}
}
.bux-listicle__title {
display: flex;
}
.bux-listicle__title-number {
background: $gray-light-60;
color: $gray-dark-80;
height: $sp-32;
min-width: $sp-32;
margin-right: $sp-16;
font-size: $ts-20;
line-height: 1.675;
text-align: center;
font-weight: 700;
display: block;
}
.bux-listicle__title-text {
@include heading($ts-20, 26, 700);
margin-top: 3px;
display: block;
}
.bux-listicle__text {
@extend .bux-paragraph;
position: relative;
padding-left: calc(#{$sp-32} + #{$sp-16});
}
.bux-listicle__item--unordered {
.bux-listicle__title {
margin-bottom: 0;
}
.bux-listicle__title-text {
margin-top: 0;
margin-bottom: $sp-16;
}
.bux-listicle__title-number {
display: none;
}
.bux-listicle__text {
left: 0;
padding-left: 0;
}
}
No notes defined.