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

With muted styling

Use muted prop to show Card in inactive state.

Clickable variant

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

You can also use Card as a link by wrapping it into appropriate component, note that Card will override default link styling to make its content appear as a regular text.

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.

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 status

Note that in the example below, the content of Card is wrapped inside Card.Body. The d-flex class is added for the horizontal orientation to achieve horizontal variant. The flex-column class is added for the main Card component.

Card Content Block Empty

With image

Without image

Horizontal variant with image

Horizontal variant without image

With loading state

Vertical variant

Horizontal variant

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 (Deprecated)

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.

Note: this component is deprecated and is going to be removed soon.

Theme Variables (SCSS)#

// 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-horizontal-min-width: $card-image-horizontal-max-width;
$card-image-vertical-max-height: 140px;
$loading-skeleton-spacer: .313rem;
Card Props API
  • className string

    Specifies class name to append to the base element.

  • orientation enum'vertical' | 'horizontal'

    Specifies which orientation to use.

    Default'vertical'
  • isClickable bool

    Specifies whether the Card is clickable, if true appropriate hover and focus styling will be added.

    Defaultfalse
  • isLoading bool

    Specifies loading state.

    Defaultfalse
  • muted bool

    Specifies whether to display Card in muted styling.

    Defaultfalse
CardHeader Props API
  • actions node

    Optional node to render on the top right of the card header, i.e. ActionRow or a DropdownMenu.

    Defaultnull
  • className string

    The class name for the CardHeader component

    Defaultnull
  • title node

    The title for the CardHeader component

    Defaultnull
  • size enum'sm' | 'md'

    The size of the CardHeader component

    Default'md'
  • subtitle node

    The subtitle of the CardHeader component

    Defaultnull
  • skeletonHeight number

    Specifies height of skeleton in loading state.

    Default20
  • skeletonWidth number

    Specifies width of skeleton in loading state.

    Defaultnull
CardGrid Props API
  • className string

    The class name for the CardGrid component

  • children node Required

    The Card components to organize into a responsive grid

  • columnSizes shape {
    xs: number,
    sm: number,
    md: number,
    lg: number,
    xl: number,
    }

    An object containing the desired column size at each breakpoint, following a similar props API as react-bootstrap/Col

    Default{ sm: 12, lg: 6, xl: 4, }
CardSection Props API
  • className string

    Specifies class name to append to the base element.

  • children node Required

    Specifies contents of the component.

  • title node

    Specifies title of the Section.

  • actions node

    Specifies node to render on the bottom right of the Section (i.e. ActionRow).

  • muted bool

    Specifies whether to display Section with muted styling.

    Defaultfalse
  • skeletonHeight number

    Specifies height of skeleton in loading state.

    Default100
  • skeletonWidth number

    Specifies width of skeleton in loading state.

CardDivider Props API
  • className string

    Specifies class name to append to the base element.

CardFooter Props API
  • children node Required

    Specifies contents of the component.

  • className string

    Specifies class name to append to the base element.

  • textElement node

    Optional node to display near actions. Should be either a plain text or an element containing text (e.g. link).

  • isStacked bool

    Specifies whether to use stacked variant.

    Defaultfalse
  • orientation enum'horizontal' | 'vertical'

    Specifies which orientation to use. This prop will override context value if provided.

  • skeletonHeight number

    Specifies height of skeleton in loading state.

    Default18
  • skeletonWidth number

    Specifies width of skeleton in loading state.

CardBody Props API
  • children node

    Specifies the content of the component.

  • className string

    The class to append to the base element.

CardImageCap Props API
  • className string

    Specifies class name to append to the base element.

  • src string

    Specifies image src.

  • srcAlt string

    Specifies image alt text.

  • logoSrc string

    Specifies logo src to put on top of the image.

  • logoAlt string

    Specifies logo image alt text.

  • skeletonHeight number

    Specifies height of Image skeleton in loading state.

    Default140
  • skeletonWidth number

    Specifies width of Image skeleton in loading state.

  • logoSkeleton bool

    Specifies whether the cap should be displayed during loading.

    Defaultfalse
  • logoSkeletonHeight number

    Specifies height of Logo skeleton in loading state.

    Default41
  • logoSkeletonWidth number

    Specifies width of Logo skeleton in loading state.

CardStatus Props API
  • children node Required

    Specifies the content of the component.

  • className string

    The class to append to the base element.

  • icon func

    Icon that will be shown in the top-left corner.

  • variant enum'primary' | 'success' | 'danger' | 'warning'

    Specifies variant to use.

    Default'warning'
  • title element | string

    Specifies title for the Card.Status.