# 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.
## Overview
```tsx
import { Card } from 'welcome-ui/Card'
import { Icon } from 'welcome-ui/Icon'
const Example = () => {
return (
<>
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.
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.
)
}
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.
```tsx
import { Card } from 'welcome-ui/Card'
import { Icon } from 'welcome-ui/Icon'
const Example = () => {
return (
<>
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.
alert('Closing 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.
alert('Closing card')} />
The Jungle Book (disabled close)
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.
)
}
export default Example
```
### Footer
The `Card.Footer` should be placed at the bottom of the `Card.Body` component to display supplementary information or actions related to the card's content.
```tsx
import { Button } from 'welcome-ui/Button'
import { Card } from 'welcome-ui/Card'
import { Icon } from 'welcome-ui/Icon'
const Example = () => {
return (
<>
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.
)
}
export default Example
```
### Sizes
You can control the padding/font-size and overall size of the Card by using the `size` prop with the following options: `sm`, `md` (default) and `lg`.
```tsx
import { Button } from 'welcome-ui/Button'
import { Card } from 'welcome-ui/Card'
import { Icon } from 'welcome-ui/Icon'
const Example = () => {
return (
<>
{}}>
The Jungle Book (sm)
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.
{}}>
The Jungle Book (md)
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.
{}}>
The Jungle Book (lg)
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.
)
}
export default Example
```
### Link card
You can use the `as` prop to render the Card as a different HTML element, such as an anchor (``) tag for link cards.
```tsx
import { Card } from 'welcome-ui/Card'
import { Icon } from 'welcome-ui/Icon'
const Example = () => {
return (
<>