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

Clickable variant

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

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.

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.

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.

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.

// 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:                  $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;