Cards

Cards are containers used to organize high-level content. Using cards can make your web product more appealing and navigable.

Best Practices

A card should only contain a single idea which may feature a call-to-action, or the option to navigate to more detailed content. The content of a card should be concise, and offer only a preview of detailed content.

Cards can make your web product more engaging. However, you should consider the type of information you are sharing, as well as how the user will be viewing this information before you decide to use a card.

If multiple cards are placed on a page, they should be placed 16px apart on all sides.

Components of a card

Elements that can be used in a card are:

Main Title - A short and clear label that states the card's main message.
Meta information - Used to organize the cards. This can be a time stamp, category etc.
Description - A more thorough explanation of the idea and call-to-action. This text should be brief.
Image or Rich Media - Associated with the card and text, an image or rich media should contribute to the message.
Buttons - When a card requires a selectable action, or you want to emphasize that the card is a clickable object, you can use buttons.
Extra information - Any additional information that enhances the message of the card.

Not all of these elements are necessary in every card. You can choose the elements which you think best fit the purpose of the card. However, every card should have a main title.

Example

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colours, and powerful display options.

Cards are built with as little markup and as few styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with various sizing options. Use custom CSS in your stylesheets or as inline styles to set a width.

Card title

Meta Information

Some quick example text to build on the card title

Another link

<div class="card mb-2 d-inline-block" style="max-width: 18rem;">
    <div class="card-body">
        <h3 class="card-title h5">Card title</h3>
        <div class="card-subtitle text-muted">Meta Information</div>
        <p class="card-text">Some quick example text to build on the card title</p>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

Some quick example text to build on the card title

<div class="card mb-2 d-inline-block" style="max-width: 18rem;">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title</p>
    </div>
</div>

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card title

Meta Information

Some quick example text to build on the card title

Another link

<div class="card mb-2 d-inline-block" style="max-width: 18rem;">
    <div class="card-body">
        <h3 class="card-title h5">Card title</h3>
        <div class="card-subtitle text-muted">Meta Information</div>
        <p class="card-text">Some quick example text to build on the card title</p>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Images

.card-img-top places an image to the top of the card.

Card title

Some quick example text to build on the card title

<div class="card mb-2 d-inline-block" style="max-width: 18rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
        <h3 class="card-title h5">Card title</h3>
        <p class="card-text">Some quick example text to build on the card title</p>
    </div>
</div>

Buttons

Buttons require no additional classes, and can be added to a card by simply adding the <button> element.

Card title

Some quick example text to build on the card title

<div class="card mb-2 d-inline-block" style="max-width: 18rem;">
    <div class="card-body">
        <h3 class="card-title h5">Card title</h3>
         <p class="card-text">Some quick example text to build on the card title</p>
    </div>
    <div class="card-footer">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-outline-primary">Secondary</button>
    </div>
</div>

Cards should have a different colour than the main background colour of the site. If your site's background colour is #FFFFFF, you will need to modify the card colour to have more contrast.

Basic card template

Basic cards can be used as containers for any type of information are sized depending on the content. Basic cards form the foundation for more complex cards which may include any combination of elements.

Basic cards are styled as follows:

White (#FFFFFF) rectangle with border radius of 4px and a drop shadow of 15% opacity and a 5px blur. The card has a padding of 20px by 16px. Every card has a title using heading 3 (Rubik Medium at 24px) with a divider placed 12px below the header. The content of the card is placed 12px below the divider.

Card title

Meta Information

Some quick example text to build on the card title

Another link

Image Cards

Image cards use the basic card template but include an image above the header.

Image cards are styled as follows:

The image is placed 20px above the header. The image spans the entire width of the card.

Card title

Meta Information

Some quick example text to build on the card title

Actionable Cards

Actionable cards use the basic card template, but include additional components below the main content. Example of additional components may include primary or secondary buttons, icon buttons, or avatars. Actionable cards can also be combined with the image card style.

Actionable cards are styled as follows:

A second divider is placed 12px below the content. Actionable items (i.e. buttons) are placed 12px below this divider.

Card title

Meta Information

Some quick example text to build on the card title

Complex Cards

Cards can technically include any number of component combinations. Using the base styles above, components such as placeholder text (metadata), avatars, icon buttons, buttons can be added below the header, or within the actionable section below the main content.

Name or Group

Job title or meta information

Card title

Meta Information

Some quick example text to build on the card title. Here is some extra information, this could be something wonderful!

Card title

Meta Information

Some quick example text to build on the card title

Extra information