Cards - Grid Layout | Crossroads Digital Design Kit

UI Components/Cards

Cards can be organized via Bootstrap's grid system or by using a couple handy helper classes included in crds-styles. These helper classes help the columns wrap correctly even when they're different heights with a CSS clearfix solution.

2 Columns

To render cards in two columns wrap them with .row and a .cards-2x selector, like so...

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
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="cards-2x">
  <div class="row">
    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

3 Columns

Use the .cards-3x selector to display 3 columns on desktop screens.

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
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
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="cards-3x">
  <div class="row">
    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img
        alt="Card image caption"
        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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

4 Columns

Want to display 4 columns on desktop screens? Just use the .cards-4x selector...

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
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
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
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="cards-4x">
  <div class="row">
    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

2 Columns on mobile

By default all of these classes display 1 column on mobile. If you want them to display 2x on the smallest screens use the .cards-2x-xs selector...

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
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
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
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="cards-4x cards-2x-xs">
  <div class="row">
    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" 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 href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Card Image Heights

By default, card images will inherit height of the image added. This can result in a non-uniform layout. If you would like your card images to have a consistent height, apply the class .card-img-constrained selector to the image(s). The example below shows the effect of these selectors.

.card-img-constrained sets images to 200px in height, and crops and centers them.

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
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="cards-2x">
  <div class="row">
    <div class="card">
      <img alt="Card image caption" class="card-img-constrained" 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 href="#">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img alt="Card image caption" class="card-img-constrained" ix-src="//crds-cms-uploads.imgix.net/content/images/crossroads-student-ministry-header2.jpg" src="//crds-cms-uploads.imgix.net/content/images/crossroads-student-ministry-header2.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 href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>