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>

Form


<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>

Applications


<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>

Training


<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>

Links


<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>

News


<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>

Policies

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


<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>

Card title

Example of a card with just text.

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


<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>

Card title

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.

Go to Application

Main Text Column Cards

Card title

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"


<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>

Card Title

Contact Information

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


<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>

Who to Ask

Contact Information


<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>

Card Title

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



<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>

DRAFT: Clickable Cards (toolkit)

Card Title

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

DRAFT: Clickable Cards (bootstrap)

Card Title

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


<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>