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.

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.

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.

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

    The title for the CardHeader component

  • size
    enum'sm' | 'md'

    The size of the CardHeader component

    Default'md'
  • subtitle
    node

    The subtitle of the CardHeader component

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

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.