Card

Simple Box with specific style.

Install and import

yarn add @welcome-ui/card @xstyled/styled-components @xstyled/system react react-dom styled-components
import { Card } from '@welcome-ui/card'

Basic

Add Card with a Card.Body component.

A card doesn't have padding by default. To add padding to a card, you should wrap your content in a Card.Body which has default padding of lg.

Other examples

A content card.

The Jungle Book

After a threat from the tiger Shere Khan forces him to flee the jungle, a man-cub named Mowgli embarks on a journey of self discovery with the help of panther Bagheera and free-spirited bear Baloo.

A picture card, if you add a backgroundImage on Card, it's displayed on cover.

The Jungle Book

Properties

Card

NameType(s)DefaultRequired
children
node

Card.Cover

NameType(s)DefaultRequired
src
string

Dependencies

Peer dependencies