Cards

Basic example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

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 our various sizing options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Contents

Cards support a wide variety of content, including images, text, links, and more. Below are examples of what’s supported

Blocks

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

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 a <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag.

Images

Images placed at the top of a card get the .card-img-top class which styles the image accordingly.

Some quick example text to build on the card title and make up the bulk of the card's content.

Header and footer

Add an optional header and/or footer within a card by using the .card-header and .card-footer classnames.

Contextual styles

Cards can be styled a number of different ways by using the contextual classes.

Use the .card-outline-* classes to change the colors and outline of a card or add .card-header-* to contextualize the card header.

The .card-unstyled class removes all borders and background colors from the default card markup

Layouts

In addition to styling the content within cards, Hubble includes a few options for laying out series of cards.

Card groups

Wrap a series of cards in a .card-group element to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card decks

Wrap a series of cards in a .card-deck element to render cards with even width, height and spacing.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago