Edit this page
[?] Component size, gzipped: 23kb

Card

Cards are a self-contained unit of information, usually as part of a feed or series of similar content. Cards have a dynamic range of modifiers that allow text-only, text and illustration, and photography. All cards have an option to include text links or buttons as a primary action. The entire card can become an active click-target.

Examples

Card basic usage

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Card with image and call to action

Example card

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Card with thumbnail and call to action

Example card

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Overrides

Additionally, you can fully customize any part of the Card through the overrides prop. The Card consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Example card

Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl.

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Card API

action import = null

Contents to be rendered at the bottom of the Card. Used to organize UI which enables user action.

react.Node

children import = null

Content to be rendered within the Card body.

react.Node

hasThumbnail function = hasThumbnail

Function that takes Card props and returns a boolean that represents if a thumbnail will be rendered.

thumbnail string
=> boolean

headerImage string

Image src to be positioned at the top of the Card.

overrides object = {}

Action { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object
Body { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object
Contents { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object
HeaderImage { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object
Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object
Thumbnail { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object
Title { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>Object

thumbnail string

Image src that by default is rendered to the side of children content.

title import

Content to render above the body content.

react.Node

Card exports

You can import this module like so:

import {Card} from 'baseui/card'

It exports the following components or utility functions:

  • Card
  • hasThumbnail
  • StyledAction
  • StyledBody
  • StyledContents
  • StyledHeaderImage
  • StyledThumbnail
  • StyledTitle
  • StyledRoot
  • StyledWrapper