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.
To render cards in two columns wrap them with .row
and a .cards-2x
selector, like so...
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome 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>
Use the .cards-3x
selector to display 3 columns on desktop screens.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome 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>
Want to display 4 columns on desktop screens? Just use the .cards-4x
selector...
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome 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>
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...
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome 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>
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.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome 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>