<dl class="bux-icon-dl">
<div class="bux-icon-dl__item">
<dt class="icon icon-envelope">Email</dt>
<dd>
<a class="bux-link" href="mailto:lastname.123@osu.edu">lastname.123@osu.edu</a>
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-phone">Phone</dt>
<dd>
<a class="bux-link" href="tel:614-555-5555">614-555-5555</a>
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-location-pin">Office</dt>
<dd>
<a class="bux-link" href="https://maps.osu.edu/#data_s=id%3AdataSource_8-1916b96cc76-layer-20-1%3A1251">4088 Postle Hall, 305 W. 12th Avenue, Columbus, OH 43210</a>
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-link">Links</dt>
<dd>
<a class="bux-link" href="https://www.osu.edu">A Day in the Life: Ken's blog</a>
</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: Email
desc: >-
<a class="bux-link"
href="mailto:lastname.123@osu.edu">lastname.123@osu.edu</a>
icon: envelope
- term: Phone
desc: <a class="bux-link" href="tel:614-555-5555">614-555-5555</a>
icon: phone
- term: Office
desc: >-
<a class="bux-link"
href="https://maps.osu.edu/#data_s=id%3AdataSource_8-1916b96cc76-layer-20-1%3A1251">4088
Postle Hall, 305 W. 12th Avenue, Columbus, OH 43210</a>
icon: location-pin
- term: Links
desc: >-
<a class="bux-link" href="https://www.osu.edu">A Day in the Life: Ken's
blog</a>
icon: link
.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;
}
}
}
No notes defined.