Component size, gzipped: 13kb

Card

API

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.

API

Card props

NameTypeDescription
children
react node
An array of Tab components.
headerImage
string
Image to be displayed in the card. Can also be an object with img attributes.
overrides
custom
Lets you customize all aspects of the component.
title
string
Title to be displayed in the card.

Card exports

You can import this module like so:

import {Card} from 'baseui/card'

It exports the following components or utility functions: