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

Github

import { Card } from 'welcome-ui/Card'
import { Icon } from 'welcome-ui/Icon'

const Example = () => {
  return (
    <>
      <p className="mb-16">
        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 padding.
      </p>

      <Card className="max-w-2/3">
        <Card.Body>
          <h3 className="flex items-center gap-4">
            <Icon name="book-alt" size="lg" />
            The Jungle Book
          </h3>
          <p>
            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.
          </p>
        </Card.Body>
      </Card>
    </>
  )
}

export default Example

Examples

Header

The Card.Header should be placed at the top of the Card.Body component to display titles or introductory content. The onClose prop can be provided to automatically add a close button on the top right corner. The close button can be disabled by setting the disabled prop to true.

Github