Search Colorado.edu

Cards

Cards

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere

<div class="row equal-height"> <div class="col-sm-6"> <div class="card margin-bottom"> <div class="card-body last-margin-none"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="margin-top-auto"><a href="#" class="button button-blue margin-top-auto">Go somewhere</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="card margin-bottom"> <div class="card-body last-margin-none"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="margin-top-auto"><a href="#" class="button button-blue margin-top-auto">Go somewhere</a></p> </div> </div> </div> </div>

Shadow Cards

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere

<div class="row equal-height"> <div class="col-sm-6"> <div class="card margin-bottom background-white shadow-medium border-none"> <div class="card-body last-margin-none"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="margin-top-auto"><a href="#" class="button button-blue margin-top-auto">Go somewhere</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="card margin-bottom background-white shadow-medium border-none"> <div class="card-body last-margin-none"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="margin-top-auto"><a href="#" class="button button-blue margin-top-auto">Go somewhere</a></p> </div> </div> </div> </div>

Cards with Images

placeholder image

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

placeholder image

Special title treatment

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Go somewhere

<div class="row equal-height"> <div class="col-sm-6"> <div class="card margin-bottom"> <img class="card-image-top" src="https://via.placeholder.com/1600x900" alt="placeholder image"> <div class="card-body last-margin-none"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="margin-top-auto"><a href="#" class="button button-blue margin-top-auto">Go somewhere</a></p> </div> </div> </div> <div class="col-sm-6"> <div class="card margin-bottom"> <img class="card-image-top" src="https://via.placeholder.com/1600x900" alt="placeholder image"> <div class="card-body last-margin-none"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="margin-top-auto"><a href="#" class="button button-blue margin-top-auto">Go somewhere</a></p> </div> </div> </div> </div>