# Card

> Bootstrap's card component provides a flexible and extensible content container with multiple variants and options.

Source: https://bootstrap-svelte.vercel.app/components/card — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

Cards are built with as little markup and styles as possible but still manage to deliver a ton of control and customization.

![Card image cap](https://placehold.co/300x180)

##### Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

```html
<Card.Root class="w-18rem">
    <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
    <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
        <button class="btn btn-primary">Go somewhere</button>
    </Card.Body>
</Card.Root>
```

## Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more.

### Body

The building block of a card is the `Card.Body`. Use it whenever you need a padded section within a card.

This is some text within a card body.

```html
<Card.Root>
    <Card.Body>
        This is some text within a card body.
    </Card.Body>
</Card.Root>
```

### Titles, Text, and Links

Card titles are added with `Card.Title` component, text with `Card.Text`, and links with `Card.Link`.

##### Card title

###### Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

```html
<Card.Root class="w-18rem">
    <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Subtitle class="mb-2 text-body-secondary">Card subtitle</Card.Subtitle>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
        <Card.Link href="#!">Card link</Card.Link>
        <Card.Link href="#!">Another link</Card.Link>
    </Card.Body>
</Card.Root>
```

### Images

`Card.Img` adds an image to your card. You can position the image at the top, bottom, or with no position (which places it as a standard img).

![Card image cap](https://placehold.co/300x180)

##### Top image

This card has an image at the top.

##### Bottom image

This card has an image at the bottom.

![Card image cap](https://placehold.co/300x180)

```html
<!-- Top image -->
<Card.Root class="w-18rem">
    <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
    <Card.Body>
        <Card.Title>Top image</Card.Title>
        <Card.Text>This card has an image at the top.</Card.Text>
    </Card.Body>
</Card.Root>

<!-- Bottom image -->
<Card.Root class="w-18rem">
    <Card.Body>
        <Card.Title>Bottom image</Card.Title>
        <Card.Text>This card has an image at the bottom.</Card.Text>
    </Card.Body>
    <Card.Img position="bottom" src="https://placehold.co/300x180" alt="Card image cap" />
</Card.Root>
```

### List Groups

Create lists of content in a card with a list group.

- An item
- A second item
- A third item

```html
<Card.Root class="w-18rem">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
</Card.Root>
```

### Kitchen Sink

Mix and match multiple content types to create the card you need.

![Card image cap](https://placehold.co/300x180)

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- An item
- A second item
- A third item

- Card link
- Another link

```html
<Card.Root class="w-18rem">
    <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
    <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    <Card.Body>
        <Card.Link href="#!">Card link</Card.Link>
        <Card.Link href="#!">Another link</Card.Link>
    </Card.Body>
</Card.Root>
```

### Header and Footer

Add an optional header and footer to your cards using `Card.Header` and `Card.Footer`.

Featured

##### Special title treatment

With supporting text below as a natural lead-in to additional content.

2 days ago

```html
<Card.Root>
    <Card.Header>Featured</Card.Header>
    <Card.Body>
        <Card.Title>Special title treatment</Card.Title>
        <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
        <button class="btn btn-primary">Go somewhere</button>
    </Card.Body>
    <Card.Footer class="text-body-secondary">2 days ago</Card.Footer>
</Card.Root>
```

## Image Overlays

Turn an image into a card background and overlay your card's text. Use `Card.ImgOverlay` to contain your text content.

![Card image](https://placehold.co/300x180/000000/FFF)

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

```html
<Card.Root class="text-bg-dark w-18rem">
    <Card.Img src="https://placehold.co/300x180" alt="Card image" />
    <Card.ImgOverlay>
        <Card.Title>Card title</Card.Title>
        <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
        <Card.Text><small>Last updated 3 mins ago</small></Card.Text>
    </Card.ImgOverlay>
</Card.Root>
```

## Horizontal Cards

Using Bootstrap's grid system, you can create horizontal cards by mixing and matching with additional elements.

![Card image](https://placehold.co/120x180)

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

```html
<Card.Root class="mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <Card.Img src="https://placehold.co/120x180" class="img-fluid rounded-start" alt="Card image" />
        </div>
        <div class="col-md-8">
            <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
                <Card.Text><small class="text-body-secondary">Last updated 3 mins ago</small></Card.Text>
            </Card.Body>
        </div>
    </div>
</Card.Root>
```

## Card Styles

Cards include various options for customizing their backgrounds, borders, and colors.

### Background and Color

Use the text and background utilities to change the appearance of a card.

Header

##### Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

```html
<Card.Root class="text-bg-primary mb-3" style="max-width: 18rem;">
    <Card.Header>Header</Card.Header>
    <Card.Body>
        <Card.Title>Primary card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
</Card.Root>

<Card.Root class="text-bg-secondary mb-3" style="max-width: 18rem;">
    <!-- Content similar to above -->
</Card.Root>

<Card.Root class="text-bg-success mb-3" style="max-width: 18rem;">
    <!-- Content similar to above -->
</Card.Root>

<Card.Root class="text-bg-danger mb-3" style="max-width: 18rem;">
    <!-- Content similar to above -->
</Card.Root>
```

### Border

Use border utilities to change just the border color of a card.

Header

##### Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

##### Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

```html
<Card.Root class="border-primary mb-3" style="max-width: 18rem;">
    <Card.Header>Header</Card.Header>
    <Card.Body class="text-primary">
        <Card.Title>Primary card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
</Card.Root>

<Card.Root class="border-success mb-3" style="max-width: 18rem;">
    <Card.Header>Header</Card.Header>
    <Card.Body class="text-success">
        <Card.Title>Success card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
</Card.Root>
```

## Card Layout

### Card Groups

Use `Card.Group` to render cards as a single, attached element with equal width and height columns.

![Card image cap](https://placehold.co/300x180)

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

![Card image cap](https://placehold.co/300x180)

##### Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

![Card image cap](https://placehold.co/300x180)

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

```html
<Card.Group>
    <Card.Root>
        <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
        <Card.Body>
            <Card.Title>Card title</Card.Title>
            <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
            <Card.Text><small class="text-body-secondary">Last updated 3 mins ago</small></Card.Text>
        </Card.Body>
    </Card.Root>
    <Card.Root>
        <!-- Similar content to above -->
    </Card.Root>
    <Card.Root>
        <!-- Similar content to above -->
    </Card.Root>
</Card.Group>
```

### Grid Cards

Use the Bootstrap grid system and its `.row-cols` classes to control how many grid columns you show per row.

![Card image cap](https://placehold.co/300x180)

##### Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

![Card image cap](https://placehold.co/300x180)

##### Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

![Card image cap](https://placehold.co/300x180)

##### Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

```html
<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <Card.Root>
            <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
            <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>This is a longer card with supporting text below as a natural lead-in to additional content.</Card.Text>
            </Card.Body>
        </Card.Root>
    </div>
    <div class="col">
        <Card.Root>
            <!-- Similar content to above -->
        </Card.Root>
    </div>
    <div class="col">
        <Card.Root>
            <!-- Similar content to above -->
        </Card.Root>
    </div>
</div>
```

## API Reference

### Card.Root Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | card-{uid} | Unique identifier for the card element |

### Card.Body Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-body-{uid}` | Unique ID for the pagination item element. |

### Card.Title Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-title-{uid}` | Unique ID for the pagination item element. |
| `level` | `number` | `5` | Heading level for the title |

### Card.Subtitle Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-subtitle-{uid}` | Unique ID for the pagination item element. |
| `level` | `number` | `5` | Heading level for the title |

### Card.Text Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-text-{uid}` | Unique ID for the pagination item element. |

### Card.Img Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-img-{uid}` | Unique ID for the pagination item element. |
| `position` | `'top' \| 'bottom' \| undefined` | - | Position of the image within the card |
| `src` | `string` | `''` | Source URL of the image |
| `alt` | `string` | `''` | Alternative text for the image |

### Card.ImgOverlay Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-img-overlay-{uid}` | Unique ID for the pagination item element. |

### Card.Header Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-header-{uid}` | Unique ID for the pagination item element. |

### Card.Footer Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-footer-{uid}` | Unique ID for the pagination item element. |

### Card.Link Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `href` | `string` | `#!` | URL for the link |
| `id` | `string` | `card-link-{uid}` | Unique ID for the pagination item element. |

### Card.Group Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `card-group-{uid}` | Unique ID for the pagination item element. |

### CSS Classes

The component applies Bootstrap's card classes based on the provided props and subcomponents:

- `card` - Applied to Card.Root
- `card-body` - Applied to Card.Body
- `card-title` - Applied to Card.Title
- `card-subtitle` - Applied to Card.Subtitle
- `card-text` - Applied to Card.Text
- `card-img-top` - Applied to Card.Img with position="top"
- `card-img-bottom` - Applied to Card.Img with position="bottom"
- `card-img` - Applied to Card.Img without a position
- `card-img-overlay` - Applied to Card.ImgOverlay
- `card-header` - Applied to Card.Header
- `card-footer` - Applied to Card.Footer
- `card-link` - Applied to Card.Link
- `card-group` - Applied to Card.Group
- `text-bg-*` - Applied to Card.Root for contextual background colors (primary, secondary, etc.)
- `border-*` - Applied to Card.Root for contextual border colors
- `w-*` - Utility width classes can be applied to adjust card width