Card
Simple Box with specific style.
Install and import
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
| Name | Type(s) | Default | Required |
|---|---|---|---|
| children | node |
Card.Cover
| Name | Type(s) | Default | Required |
|---|---|---|---|
| src | string |
Dependencies
- - @welcome-ui/box^3.0.0-alpha.2
- - @welcome-ui/shape^3.0.0-alpha.2
- - @welcome-ui/system^3.0.0-alpha.2
- - @welcome-ui/utils^3.0.0-alpha.2
Peer dependencies
- - @xstyled/styled-components^2.1.0
- - @xstyled/system^2.1.0
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.0.0