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

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

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

The Jungle Book
Show editor

Properties

Card

Card.Cover

Dependencies

• - @welcome-ui/box
  ^3.0.0
• - @welcome-ui/shape
  ^3.0.0
• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/utils
  ^3.0.0

Peer dependencies

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1