Cards - Types | Crossroads Digital Design Kit

UI Components/Cards

A card is a flexible and extensible content container. It includes options for images, headers, and a wide variety of content.

The DDK provides support for three styles of card: default cards, cards with an overlapping header, and overlay cards.

Default Card

Card image caption

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card">
  <img alt="Card image caption" class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg"
    src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" ix-initialized="ix-initialized" />
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <h5 class="card-subtitle">Card subtitle</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a class="card-link" href="#">Go somewhere</a>
  </div>
</div>

Default Overlay Cards

Sometimes you want your words and pictures to come together as one. That's where overlay cards come in!

This card style works best with visually arresting imagery and short, but descriptive titles (category and author are optional).

Like all the cards in this section, these cards are designed to fill the width of the container you put it in. (But because of an overlay card's showy nature, it's best to put it in a large spot for all to admire.)

Adding a class of overlay-card-xl to overlay-card will create a card that is nearly the full height of a page.

<a href="#" class="overlay-card">
  <div class="bg-overlay"></div>
  <div class="overlay-card-image">
    <img ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" ix-initialized="ix-initialized" />
  </div>

  <div class="overlay-card-content">
    <p class="overlay-card-category">Category Name</p>
    <h2 class="overlay-card-title">Card Title</h2>
    <p class="overlay-card-author">Card Author</p>
  </div>
</a>

Card with Overlapping Header

Modifier classes can be added to adjust the look of a given card. Here, the class .card-title--overlap has been added to the header element, which allows the text to overlap a top-placed image and provides a stylized emdash below.

Card image caption

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card">
  <img alt="Card image caption" class="card-img-top img-responsive" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" src="//crds-cms-uploads.imgix.net/content/images/crossroads-go-header-imgs-nicaragua.jpg" ix-initialized="ix-initialized" />
  <div class="card-block">
    <h4 class="card-title card-title--overlap text-uppercase">
      Card title
    </h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a class="card-link" href="#">Go somewhere</a>
  </div>
</div>