<ul class="bux-link-list" role="list">
<li class="bux-link-list__item">
<a class="bux-text-link" href="">
Title of List Item
</a>
<div class="bux-link-list__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li class="bux-link-list__item">
<a class="bux-text-link" href="">
Title of List Item
</a>
<div class="bux-link-list__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li class="bux-link-list__item">
<a class="bux-text-link" href="">
Title of List Item
</a>
<div class="bux-link-list__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
</ul>
{#
Link List
Available variables:
- items: Array of link items.
- item.url: URL for the link item.
- item.text: String for the item link.
#}
<ul class="bux-link-list" role="list">
{% for item in items %}
<li class="bux-link-list__item">
<a
class="bux-text-link"
href="{{ item.url }}"
>
{{ item.link }}
</a>
{% if item.text %}
<div class="bux-link-list__text">
{{ item.text }}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
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:
- url: null
link: Title of List Item
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
- url: null
link: Title of List Item
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
- url: null
link: Title of List Item
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
.bux-link-list {
font-size: $ts-base;
&__item {
border-top: 2px solid $gray-light-80;
padding: $sp-16;
&:only-child {
border-bottom: 2px solid $gray-light-80;
}
}
&__text {
margin-top: $sp-8;
}
.bux-text-link {
display: block;
font-weight: 700;
margin-right: 0;
padding-right: $sp-24;
position: relative;
&:after {
font-weight: 400;
padding-left: $sp-8;
right: $sp-8;
}
&:hover {
&:after {
right: 0;
}
}
}
}
No notes defined.