Card

Card is a box of related content usually describing a single object. It can be composed of several subcomponents, we give full overview of those subcomponents below.

Card supports vertical and horizontal orientation which is controlled by CardContext, see examples below.

This component uses a Card from react-bootstrap as a base component and extends it with additional subcomponents.
See React-Bootstrap for additional documentation.

Basic Usage#

Card Title

This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.

Action 1

Show code example

Clickable variant#

You use isClickable prop to add additional hover and focus styling to the Card.

Card Title

This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.

Action 1

Show code example

Header#

You may add a header by adding a Card.Header component. This header displays a title, subtitle, and may contain actions.

Actions#

The Card.Header supports custom actions via the actions prop and renders them on the top right of the header.

Sizes#

The Card.Header supports two size variants, "sm" and "md". Add size="sm" for smaller header content and actions.

Section#

Card.Section is the main block to display card content. Can include its own title and actions separate from other card components. Multiple sections have a Card.Divider between them.

Footer#

Card.Footer is the bottom part of the card. Usually used to outline actions that can be taken on the card object. Note that Card.Footer has a separate orientation prop which will override the value from CardContext, this was implemented because there are some use cases where you would want to display Card with horizontal orientation containing footer with vertical orientation.

Vertical variant#

Horizontal variant#

With Image Cap#

ImageCap is an image that sits on the top or the left edge of a Card. Can contain an optional logo image.

Title

Subtitle

Section title

This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.

Action 1

Show code example

Horizontal variant#

When using horizontal variant Paragon provides additional component Card.Body which acts as a wrapper for content you want to display between ImageCap and Footer. Use it if content contains multiple components.

Title

Subtitle

Section title

Here we want to display both Header and Section between ImageCap and Footer components, so we use Card.Body to accomplish that.

Action 1Action 2

Section title

In this Card we only want to display Section, therefore no need to use Card.Body wrapper.

Action 1Action 2

Title

Section title

This is a special case where we want to have Footer with vertical orientation in the Card with horizontal orientation.

Some footer text

Action 1Action 2

Show code example

Card Content Block Empty#

With image#

Headline

This is an optional text description.

Action

Show code example

Without image#

Horizontal variant with image#

Headline

This is an optional text description.

Action

Show code example

Horizontal variant without image#

CardGrid#

This component displays a collection of Cards as a grid (with customizable responsive behavior), where all cards in a given row have equal height. Try shrinking the width of your browser to view the responsive behavior.

Card title

Section 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 title

Section 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

Section 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 title

Section 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 title

Section 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

Section 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

Show code example

CardDeck#

This component gives any child Card components equal height with an appropriate gutter between cards. However, it is meant to be used as a single horizontal row of Cards, not as a grid. See CardGrid for more details.

Card title

Section 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 title

Section 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

Section 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

Show code example

// Cards

$card-spacer-y:                      .75rem !default;
$card-spacer-x:                      1.25rem !default;
$card-border-width:                  $border-width !default;
$card-border-radius:                 $border-radius !default;
$card-border-color:                  rgba($black, .125) !default;
$card-border-focus-color:            rgba($black, .5) !default;
$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg:                        rgba($black, .03) !default;
$card-cap-color:                     null !default;
$card-height:                        null !default;
$card-color:                         null !default;
$card-bg:                            $white !default;

$card-img-overlay-padding:           1.25rem !default;

$card-group-margin:                  calc($grid-gutter-width / 2) !default;
$card-deck-margin:                   $card-group-margin !default;
$card-grid-margin:                   $card-group-margin !default;

$card-columns-count:                 3 !default;
$card-columns-gap:                   1.25rem !default;
$card-columns-margin:                $card-spacer-y !default;

$card-divider-bg:                    $light-400 !default;
$card-divider-margin-y:              $card-spacer-y !default;

$card-footer-actions-gap:            .5rem !default;

$card-logo-left-offset:              1.5rem !default;
$card-logo-bottom-offset:            1rem !default;
$card-logo-left-offset-horizontal:   0.4375rem !default;
$card-logo-bottom-offset-horizontal: 0.4375rem !default;

$card-logo-width:                    7.25rem !default;
$card-logo-height:                   4.125rem !default;

$card-image-border-radius:           .3125rem !default;
$card-logo-border-radius:            0.25rem !default;

$card-footer-text-font-size:         $x-small-font-size;

$card-image-horizontal-max-width:    240px;
$card-image-vertical-max-height:     140px;