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.

Card Content Block Empty#

With image#

Without image#

Horizontal variant with image#

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.

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:                  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:   .4375rem !default;
$card-logo-bottom-offset-horizontal: .4375rem !default;

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

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

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

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