List Groups & Links
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Link List
A great way to display a list of links on your site. You can also use active states.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="card card-shadow">
<ul class="nav flex-column full-height stretch-height">
<li class="nav-item"><a class="nav-link" href="#">Card Link List</a></li>
<li class="nav-item active"><a class="nav-link nav-link-sm" href="#">Active list item two</a></li>
<li class="nav-item"><a class="nav-link nav-link-sm" href="#">List item three</a></li>
<li class="nav-item"><a class="nav-link nav-link-sm " href="#">List item four</a></li>
<li class="nav-item"><a class="nav-link nav-link-sm " href="#">List item five</a></li>
</ul>
</div>
</div>
</div>
Link with Icons
Icon lists can adjust form a vertical listing to a side by side horizontal listing based on the screen size and are a great way to draw attention.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="card card-shadow">
<ul class="nav flex-xl-row flex-lg-column flex-md-column flex-sm-row flex-xs-column full-height stretch-height">
<li class="nav-item no-stretch"><a class="nav-link" href="#">Card Link List</a></li>
<li class="nav-item">
<a class="media media-icon" href="">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-shield_svg.svg" alt="Brighter World Calendar Icon">
<div class="media-body">
<h3 class="media-title">Icon One</h3>
</div>
</a>
</li>
<li class="nav-item">
<a class="media media-icon" href="">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-shield_svg.svg" alt="Brighter World Person Icon">
<div class="media-body">
<h3 class="media-title">Icon Two</h3>
</div>
</a>
</li>
<li class="nav-item">
<a class="media media-icon" href="">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-shield_svg.svg" alt="Brighter World Book Icon">
<div class="media-body">
<h3 class="media-title">Icon Three</h3>
</div>
</a>
</li>
<li class="nav-item">
<a class="media media-icon" href="">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/icon-shield_svg.svg" alt="Brighter World Certificate Icon">
<div class="media-body">
<h3 class="media-title">Icon Four</h3>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
Link with Text
test
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor euismod orci quis efficitur. Maecenas nec dui aliquet, vestibulum neque sit amet, maximus diam.
Calculate Now<div class="row row-eq-height">
<div class="col-md-6">
<div class="card card-shadow card-link-floater">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" href="#">CARD LINK CONTENT</a></li>
</ul>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor euismod orci quis efficitur. Maecenas nec dui aliquet, vestibulum neque sit amet, maximus diam.</p>
<a href="#" class="card-link">Calculate Now</a>
</div>
</div>
</div>
</div>