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>