Cards

<div class="card top-blue">
  <div class="card-body img-title-card">
    <h2 class="card-title img-title-form">Form</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
  <div class="card-body img-title-card">
    <h2 class="card-title img-title-app">Applications</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
  <div class="card-body img-title-card">
    <h2 class="card-title img-title-training">Training</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
  <div class="card-body img-title-card">
    <h2 class="card-title img-title-link">Links</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
  <div class="card-body img-title-card">
    <h2 class="card-title img-title-news">News</h2>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
  <div class="card-body img-title-card">
    <h2 class="card-title img-title-policy">Policies</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis mattis risus. Etiam maximus mauris odio. Nunc sodales sit amet ante ac consectetur.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>Example of a card with just text.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis mattis risus. Etiam maximus mauris odio. Nunc sodales sit amet ante ac consectetur.</p>
  </div>
</div>

<div class="card top-blue">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>Example of a card with text and links. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis mattis risus. Etiam maximus mauris odio. Nunc sodales sit amet ante ac consectetur.</p>
    <a class="il-button il-white-blue d-block" href="#">Go to Application</a>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
    <li class="list-group-item"><a href="#">An item</a></li>
  </ul>
</div>

<div class="card top-blue">
<div class="card-body img-title-card">
<h2 class="card-title img-title-redirect">Card title</h2>

<p>When a blue line card is in the main text column of the page don't have a "list-group" ul outside the "card-body" div. Instead, put the ul in the card body and do not add the "list-group" or "list-group-flush" styles. The li items should also not have the class "list-group-item"</p>

<ul>
  <li><a href="#">An item</a></li>
  <li><a href="#">An item</a></li>
  <li><a href="#">An item</a></li>
</ul>
</div>
</div>

<div class="card header-blue">
<div class="card-header">
<h2 class="card-title">Card Title</h2>
</div>

<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis mattis risus. Etiam maximus mauris odio. Nunc sodales sit amet ante ac consectetur.</p>

</div>
</div>

<div class="card contact-card">
<div class="card-header">
<h2 class="card-title">Who to Ask</h2>
</div>

<div class="card-body">
<p>Contact Information</p>

</div>
</div>

<div class="card bg-light">
<div class="card-body">
<h2>Card Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis mattis risus. Etiam maximus mauris odio. Nunc sodales sit amet ante ac consectetur.</p>
</div>
</div>

<div class="card clickable-card">
<div class="card-body">
<h2 class="card-title"><a class="stretched-link" href="#">Card Title</a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis mattis risus. Etiam maximus mauris odio. Nunc sodales sit amet ante ac consectetur.</p>
</div>
</div>