WUI logo

Card

Allows user to show content and action with specific style.

version

4.2.0

install

yarn add @welcome-ui/card

usage

import { Card } from '@welcome-ui/card'

Basic #

Add Card with a Card.Body component.

<Card maxWidth={400} lineHeight="2">
<Card.Body>
A card doesn't have padding by default. To add padding to a card, you should wrap your content
in a <strong>Card.Body</strong> which has default <strong>padding</strong> of{' '}
<strong>lg</strong>.
</Card.Body>
</Card>

Other examples #

A content card.

<Card maxWidth={400}>
<Card.Cover
w="100%"
src="https://m.media-amazon.com/images/M/MV5BMzE0NzgyODIxN15BMl5BanBnXkFtZTgwNDU0NjU5NzE@._V1_SX1777_CR0,0,1777,994_AL_.jpg"
/>
<Card.Body>
<Text as="h4" fontWeight="bold" mt={0} mb="lg" color="dark.900">
The Jungle Book
</Text>
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.
</Card.Body>
</Card>

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

<Card
maxWidth={400}
h={200}
backgroundImage="url('https://m.media-amazon.com/images/M/MV5BMzE0NzgyODIxN15BMl5BanBnXkFtZTgwNDU0NjU5NzE@._V1_SX1777_CR0,0,1777,994_AL_.jpg')"
display="flex"
alignItems="flex-end"
>
<Box
padding="xl"
w="100%"
background="linear-gradient(0deg, rgba(0,0, 0, 0.7) 0%, rgba(0,0,0,0) 100%)"
>
<Text as="h4" fontWeight="bold" m={0} color="light.900">
The Jungle Book
</Text>
</Box>
</Card>

Properties #

Card #
NameType(s)DefaultRequired
Card.Cover #
NameType(s)DefaultRequired
src
string
shape
"circle"
"square"

Packages #

Dependencies #
Peer dependencies #

Previous

Badge