Original source from https://utsa-asc.github.io/college-dls/components/detail/link-list.html
This full-width component is design to provide a clear two-column format for list item. For an example of this component in action, please see the Reference - Institute Home Page
This component is supported in our Cascade templates via the WYSIWYG by creating an unordered (bullet) list of linked items then clicking on the list and going to Formats > Custom > Link List.
<section class="my-5">
<div class="container">
<div class="row">
<h2 class="h3 mb-3">This is the Link List Title</h2>
<div class="col-12 col-md-6">
<ul class="resources-list">
<li><a href="#">Covid-19 Funding Opps</a></li>
<li><a href="#">Covid-19 Labs Exemption</a></li>
<li><a href="#">Find Tech Transfer</a></li>
<li><a href="#">College of Business Administration</a></li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="resources-list">
<li><a href="#">Covid-19 Funding Opps</a></li>
<li><a href="#">Covid-19 Labs Exemption</a></li>
<li><a href="#">Find Tech Transfer</a></li>
<li><a href="#">College of Business Administration</a></li>
</ul>
</div>
</div>
</div>
</section>
/* components/03-sections/05-content-group/06-link-list/link-list.scss */
/* BEGIN link-list.scss */
.resources-list {
a {
text-decoration: none;
}
}
.resources-list li a {
border-bottom: 1px solid $orange-a11y;
padding-bottom: 10px;
display: block;
font-weight: 600;
font-size: 23px;
color: $blue;
}
/* Dark Mode - Component Styles - Link List */
@include color-mode(dark) {
ul.resources-list li a {
border-bottom: 1px solid $orange;
color: $grey;
&:hover {
background-color: $blue;
color: $white;
}
}
.tab-wrapper, .accordion-wrapper {
ul.resources-list li {
color: $blue;
}
ul.resources-list li a {
color: $blue;
&:hover {
background-color: $blue;
color: $white;
}
}
}
}
/* Component Styles - Link List END */
/* END link-list.scss */
<section class="my-5">
<div class="container">
<div class="row">
<h2 class="h3 mb-3">{{ headline }}</h2>
<div class="col-12 col-md-6">
<ul class="resources-list">
{{#each link-list}}
<li><a href="{{ url }}">{{ text }}</a></li>
{{/each}}
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="resources-list">
{{#each link-list}}
<li><a href="{{ url }}">{{ text }}</a></li>
{{/each}}
</ul>
</div>
</div>
</div>
</section>