<dl class="bux-icon-dl bux-icon-dl--2-col">
<div class="bux-icon-dl__item">
<dt class="icon icon-calendar">Date</dt>
<dd>
October 25, 2022
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-dollar-sign-circle">Cost</dt>
<dd>
$35 - $102.50
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-clock">Time</dt>
<dd>
1 p.m. - 3 p.m.
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-link">Website</dt>
<dd>
<a class="bux-link" href="https://www.osu.edu">Name of website</a>
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-location-pin">Location</dt>
<dd>
<a class="bux-link" href="https://maps.osu.edu/#data_s=id%3AdataSource_8-1916b96cc76-layer-20-1%3A546">Hopkins Hall</a>, Room 225
</dd>
</div>
</dl>
{#
Icon Description List
Available variables:
- list_items: Array of list items.
- item.icon: Name of the BUX UI Icon to display.
- item.term: Term for the list item.
- item.desc: Description / definition for the list item.
#}
{% set list_classes = "bux-icon-dl" %}
{% if _self.name != "default" %}
{% set list_classes = list_classes ~ " bux-icon-dl--" ~ _self.name %}
{% endif %}
<dl class="{{ list_classes }}">
{% for item in list_items %}
<div class="bux-icon-dl__item">
<dt class="icon icon-{{ item.icon }}">{{ item.term }}</dt>
<dd>
{{ item.desc }}
</dd>
</div>
{% endfor %}
</dl>
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
list_items:
- term: Date
desc: October 25, 2022
icon: calendar
- term: Cost
desc: $35 - $102.50
icon: dollar-sign-circle
- term: Time
desc: 1 p.m. - 3 p.m.
icon: clock
- term: Website
desc: <a class="bux-link" href="https://www.osu.edu">Name of website</a>
icon: link
- term: Location
desc: >-
<a class="bux-link"
href="https://maps.osu.edu/#data_s=id%3AdataSource_8-1916b96cc76-layer-20-1%3A546">Hopkins
Hall</a>, Room 225
icon: location-pin
.bux-icon-dl {
/* Using rems to preserve spacing at increased default font sizes */
--item-gap: 1rem; // $sp-16
--column-gap: 2rem; // 32px
--column-gap--sm: 1rem; // $sp-16
--icon-size: #{$ts-md};
--icon-gap: 0.75rem; // $sp-12
word-break: break-word;
& .icon::before {
font-size: var(--icon-size);
color: $scarlet;
line-height: 1;
font-family: $icon;
font-weight: 400;
margin-right: var(--icon-gap);
}
dt {
display: flex;
align-items: center;
}
dd {
margin-left: rem-calc(38);
}
}
.bux-icon-dl--2-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
column-gap: var(--column-gap);
& .bux-icon-dl__item:nth-child(odd) {
grid-column: 1 / 2;
}
& .bux-icon-dl__item:nth-child(even) {
grid-column: 2 / 3;
}
}
/* Stacks to single-column on viewports under medium breakpoint */
@media (max-width: $bp-md) {
.bux-icon-dl--2-col {
display: flex;
flex-direction: column;
gap: var(--item-gap);
& .bux-icon-dl__item {
grid-column: unset;
}
}
}
When ordering list items in the markup, keep in mind that 1) items will flow from left to right before starting a new row on the left, and 2) columns will stack below the medium breakpoint.