Cards
Cards are flexible content containers. They may contain a headline, image, or copy, along with a link. Cards provide the opportunity to format blocks of content and short calls-to-action.
Basic Card
Card Title
Short card description. Lorem ipsum dolor sit amet.
Card with Hover
A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.
<!-- Basic card with no hover effects -->
<div class="card">
<div class="card-body">
<h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
<p>Short card description. Lorem ipsum dolor sit amet</p>
</div>
</div>
<!-- Basic card that changes background on hover -->
<div class="card hover-bg">
<div class="card-body">
<h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
<p>A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.</p>
</div>
</div>
Card with Image
Cards with images use an element with the .card-image
class to wrap the image.
Card Title
A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.
<div class="card">
<p class="card-image">
<img src="image.png" width="600" height="400" alt="Photo of Campus">
</p>
<div class="card-body">
<h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
<p>A description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque in rebus minime obscuris non multus est apud eos disserendi labor.</p>
</div>
</div>
<div class="card">
<p class="card-image">
<img src="image.png" width="600" height="400" alt="Photo of Campus">
</p>
<div class="card-body">
<!-- The `.card-label` class can be used to add a label -->
<p class="card-label">Card Label</p>
<h2 class="card-title"><a class="card-link" href="#">Card Title</a></h2>
<p>Short card description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
Card CSS Reference
Class | Description |
---|---|
.card |
Container used to wrap card content. |
.card-body |
Element containing copy used in card. |
.card-image |
Element containing the card’s image. |
.card-title |
Used to designate title of card. |
.card-link |
Used to designate link of card. |
.card-label |
Used to style a label or tag for the card. |
CSS Variable | Description |
---|---|
--card-image-width |
Controls width of card image. |
--card-padding |
Controls the padding of card. |
Hover Options
Additional classes can be added to the markup to add various hover effects.
-
Card with .hover-bg and .hover-grow
Short card description. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-
Card with .hover-more
Short card description. Lorem ipsum dolor sit amet.
<!-- Card that changes background and grows on hover -->
<div class="card hover-bg hover-grow">
<p class="card-image">
<img src="/assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
</p>
<div class="card-body">
<h2 class="card-title"><a class="card-link" href="#">Card with .hover-bg and .hover-grow</a></h2>
<p>Short card description. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<div class="card">
<p class="card-image">
<img src="/assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
</p>
<!-- The `.hover-more` class will show an arrow to the right of the element on hover. If we want the arrow to be vertically aligned with the card body, and not the image, we add it to the `.card-body` element. -->
<div class="card-body hover-more">
<h2 class="card-title"><a class="card-link" href="#">Card with .hover-more</a></h2>
<p>Short card description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
Class | Description |
---|---|
.hover-bg |
Used to change the background color of the element on hover. |
.hover-more |
Used to show a vertically centered arrow on the element on hover. For stacked cards, this should be added to the card-body . |
.hover-grow |
Used to scale up the element on hover. |
Horizontal Options
To have the cards show up horizontally, with the image to the left of the card body, add the horizontal
class to the card
element.
-
Horizontal Card with Hover State
Short card description.
-
Horizontal Card with More Arrow
Short card description.
<!-- Horizontal card that changes background on hover -->
<div class="card horizontal hover-bg">
<p class="card-image">
<img src="assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
</p>
<div class="card-body">
<h2 class="card-title"><a class="card-link" href="#">Horizontal Card with Hover State</a></h2>
<p>Short card description.</p>
</div>
</div>
<!-- Horizontal card that shows arrow on hover -->
<div class="card horizontal hover-more">
<p class="card-image">
<img src="assets/images/placeholder-campus-2-600x400.jpg" width="600" height="400" alt="Photo of Campus">
</p>
<div class="card-body">
<h2 class="card-title"><a class="card-link" href="#">Horizontal Card with More Arrow</a></h2>
<p>Short card description.</p>
</div>
</div>
Breakpoints
By default, cards marked with horizontal
will switch to a horizontal layout at the medium breakpoint. Until then, they will be stacked. To override this, you can use the following horizontal-*
and stacked-*
classes to set the breakpoints at which a card will switch from stacked to horizontal, or vice versa.
Class | Description |
---|---|
.horizontal |
Switch to horizontal style at medium breakpoint and up. |
.horizontal-xs |
Use horizontal style on smallest screens and up. |
.horizontal-sm |
Switch to horizontal style at small breakpoint and up. |
.horizontal-md |
Switch to horizontal style at medium breakpoint and up (same as using .horizontal ). |
.horizontal-lg |
Switch to horizontal style at large breakpoint and up. |
.horizontal-xl |
Switch to horizontal style at x-large breakpoint. |
.stacked-sm |
Switch to stacked style at small breakpoint and up. |
.stacked-md |
Switch to stacked style at medium breakpoint and up. |
.stacked-lg |
Switch to stacked style at large breakpoint and up. |
.stacked-xl |
Switch to stacked style at x-large breakpoint and up. |