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
.
As link
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.
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 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 Fallback Image
You can specify fallbackSrc
image to show in case your main src
fails to load.
A fallback source is available for both the main ImageCap
component image and the logo.
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;
- className
string
RequiredSpecifies class name to append to the base element.
- orientation
enum
Required'vertical' | 'horizontal'Default'vertical'Specifies which orientation to use.
- isClickable
bool
RequiredDefaultfalseSpecifies whether the
Card
is clickable, iftrue
appropriatehover
andfocus
styling will be added. - isLoading
bool
RequiredDefaultfalseSpecifies loading state.
- muted
bool
RequiredDefaultfalseSpecifies whether to display
Card
in muted styling.
- actions
node
RequiredDefaultnullOptional node to render on the top right of the card header, i.e. ActionRow or a DropdownMenu.
- className
string
RequiredDefaultnullThe class name for the CardHeader component
- title
node
RequiredDefaultnullThe title for the CardHeader component
- size
enum
Required'sm' | 'md'Default'md'The size of the CardHeader component
- subtitle
node
RequiredDefaultnullThe subtitle of the CardHeader component
- skeletonHeight
number
RequiredDefault20Specifies height of skeleton in loading state.
- skeletonWidth
number
RequiredDefaultnullSpecifies width of skeleton in loading state.
- className
string
RequiredThe class name for the CardGrid component
- children
node
Required RequiredThe Card components to organize into a responsive grid
- columnSizes
shape
Required {xs:number
,sm:number
,md:number
,lg:number
,xl:}number
,Default{ sm: 12, lg: 6, xl: 4, }An object containing the desired column size at each breakpoint, following a similar props API as
react-bootstrap/Col
- className
string
RequiredSpecifies class name to append to the base element.
- children
node
Required RequiredSpecifies contents of the component.
- title
node
RequiredSpecifies title of the
Section
. - actions
node
RequiredSpecifies node to render on the bottom right of the
Section
(i.e.ActionRow
). - muted
bool
RequiredDefaultfalseSpecifies whether to display
Section
with muted styling. - skeletonHeight
number
RequiredDefault100Specifies height of skeleton in loading state.
- skeletonWidth
number
RequiredSpecifies width of skeleton in loading state.
- className
string
RequiredSpecifies class name to append to the base element.
- children
node
RequiredSpecifies the content of the component.
- className
string
RequiredThe class to append to the base element.
- className
string
RequiredSpecifies class name to append to the base element.
- src
string
RequiredSpecifies image src.
- fallbackSrc
string
RequiredSpecifies fallback image src.
- srcAlt
string
RequiredSpecifies image alt text.
- logoSrc
string
RequiredSpecifies logo src to put on top of the image.
- fallbackLogoSrc
string
RequiredSpecifies fallback image logo src.
- logoAlt
string
RequiredSpecifies logo image alt text.
- skeletonHeight
number
RequiredDefault140Specifies height of Image skeleton in loading state.
- skeletonWidth
number
RequiredSpecifies width of Image skeleton in loading state.
- logoSkeleton
bool
RequiredDefaultfalseSpecifies whether the cap should be displayed during loading.
- logoSkeletonHeight
number
RequiredDefault41Specifies height of Logo skeleton in loading state.
- logoSkeletonWidth
number
RequiredSpecifies width of Logo skeleton in loading state.
- children
node
Required RequiredSpecifies the content of the component.
- className
string
RequiredThe class to append to the base element.
- icon
func
RequiredIcon that will be shown in the top-left corner.
- variant
enum
Required'primary' | 'success' | 'danger' | 'warning'Default'warning'Specifies variant to use.
- title
element
Required |string
Required RequiredSpecifies title for the
Card.Status
.