WUI logo

Card

The Card component is a versatile container used to group related information in a visually distinct way. It often includes elements like a header, body, and footer, providing a cohesive layout for displaying content such as text, images, and actions. Cards enhance the user experience by organizing information into manageable sections.

Source@welcome-ui/card
OverviewProps
import * as React from 'react'
import { Card } from '@welcome-ui/card'


const Example = () => {
  return (
    <Card maxWidth={400}>
      <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>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/card
2

Import component:

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

Examples

Content card

Picture card

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

BadgeSwiper