Card
- Central CMS
- Central Forms
- Central Connect
Cards are a flexible container for standout content with a range of configurable options for headers and footers, images and calls to action.
Cards can be sized and arranged using the common grid classes and respond well at small screen widths.
Basic usage
- HTML
<div class="card">
<div class="card__body">
<h1 class="card__title">Card Title</h1>
<p>This is the card body, it should be helpful and descriptive.</p>
<a href="#cta" class="btn btn--primary">Call to Action</a>
</div>
</div>
Card components
Body
At its most basic, a card can contain just a body.
This is the card body, it should be helpful and descriptive.
- HTML
<div class="card">
<div class="card__body">
<p>This is the card body, it should be helpful and descriptive.</p>
</div>
</div>
Headers and footers
Add an optional header and/or footer within a card, you can choose whether or not to also include a card title.
The card header can use any heading level or a regular inline element like span
but it will maintain the same text size, you should choose the most appropriate element to mark up your header based on the context of your UI
Card Heading
- HTML
<div class="card">
<div class="card__header">
<h1 class="card__heading">Card Heading</h1>
</div>
<div class="card__body">
<p>This is the card body, it should be helpful and descriptive.</p>
<a href="#cta-one" class="card-link">Card link</a>
<a href="#cta-two" class="card-link">Another link</a>
</div>
<div class="card__footer muted">
<p>Card footer</p>
</div>
</div>
Titles, text and links
A card can contain a .card__title
using a heading element within the body. Like headers you should use the most approriate element based on your context.
Links using the .card-link
class will be spaced apart slightly.
- HTML
<div class="card">
<div class="card__body">
<h1 class="card__title">Card Title</h1>
<p>This is the card body, it should be helpful and descriptive.</p>
<a href="#cta-one" class="card-link">Card link</a>
<a href="#cta-two" class="card-link">Another link</a>
</div>
</div>
Images
Images can be added to the top of a card, they will be automatically made to respond to the card width.
Use .card--full-bleed
on the .card
to make the image cover the default border of the card.
Grid sizing
Cards will be 100% width by default and can be modified using grid classes. Use .g-row
divs to organise cards into rows until we get fancier with flexbox.
Apply a grid width to a card with class="card g-col--6"
(where 6
is the number of columns).
Centering card contents
Use class="card u-text-align-center"
to make an entire card centered.
Card Heading