@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Card

Dash ui cards provide a flexible and extensible content container with multiple variants and options.

## Basic Example

Below is an example of a basic card with mixed content and a fixed width.

##### Card title

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

Go somewhere

    <!-- Basic
                              -->
                            <div class="card" style="width: 20rem;">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                            </div>

## Card 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.

    <!-- card
                              body -->
                            <div class="card">
                            <div class="card-body">
                            This is some text within a card body.
                            </div>
                            </div>

## Titles, text, and links

Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to an `<a>` tag.

Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.

##### 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

    <!-- Title
                              Text -->
                            <div class="card" style="width: 18rem;">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <h6 class="card-subtitle
                                mb-2 text-muted">Card subtitle</h6>
                            <p class="card-text">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            <a href="#" class="card-link">Card link</a>
                            <a href="#" class="card-link">Another link</a>
                            </div>
                            </div>

## Kitchen sink

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

##### Card title

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

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Card link Another link

    <!--
                              Kitchen Sink -->
                            <div class="card" style="width: 20rem;">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            </div>
                            <ul class="list-group
                                list-group-flush">
                            <li class="list-group-item">Cras justo odio</li>
                            <li class="list-group-item">Dapibus ac facilisis in</li>
                            <li class="list-group-item">Vestibulum at eros</li>
                            </ul>
                            <div class="card-body">
                            <a href="#" class="card-link">Card link</a>
                            <a href="#" class="card-link">Another link</a>
                            </div>
                            </div>

Featured

##### Special title treatment

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

Go somewhere

    <!-- Center
                              alignment -->
                            <div class="card
                                text-center">
                            <div class="card-header">
                            Featured
                            </div>
                            <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in
                            to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                            <div class="card-footer
                                text-muted">
                            2 days ago
                            </div>
                            </div>

## Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

##### Special title treatment

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

Go somewhere

##### Special title treatment

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

Go somewhere

##### Special title treatment

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

Go somewhere

    <!-- Text
                              alignment -->
                            <div class="card" style="width: 18rem;">
                            <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in
                            to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                            </div>
                            <div class="card
                                text-center" style="width:
                                18rem;">
                            <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in
                            to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                            </div>
                            <div class="card
                                text-end" style="width:
                                18rem;">
                            <div class="card-body">
                            <h5 class="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in
                            to additional content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                            </div>

## Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

### Image on Top

`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.

##### Card title

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

Last updated 3 mins ago

    <!--
                                Image on Top -->
                              <div class="card">
                              <img src="../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="...">
                              <div class="card-body">
                              <h5 class="card-title">Card title</h5>
                              <p class="card-text">This is a wider card with supporting text
                              below as a natural lead-in to
                              additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Last updated 3
                              mins ago</small></p>
                              </div>
                              </div>

### Image on Bottom

`.card-img-bottom` places an image to the bottom of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.

##### Card title

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

Last updated 3 mins ago

    <!--
                                Image on bottom -->
                              <div class="card">
                              <div class="card-body">
                              <h5 class="card-title">Card title</h5>
                              <p class="card-text">This is a wider card with supporting text
                              below as a natural lead-in to
                              additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Last updated 3
                              mins ago</small></p>
                              </div>
                              <img src="../assets/images/blog/blog-img-1.jpg" class="card-img-bottom" alt="...">
                              </div>

## Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

##### Card title

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

Last updated 3 mins ago

    <!-- image
                              overlay -->
                            <div class="card bg-dark
                                text-white">
                            <img src="..." class="rounded"
                              alt="...">
                            <div class="card-img-overlay">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below
                            as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <p class="card-text">Last updated 3 mins ago</p>
                            </div>
                            </div>

## Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with `.g-0` and use `.col-md-*` classes to make the card horizontal at the `md` breakpoint. Further adjustments may be needed depending on your card content.

##### Card title

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

Last updated 3 mins ago

    <!--
                              Horizontal -->
                            <div class="card
                                mb-3" style="max-width: 540px;">
                            <div class="row
                                g-0">
                            <div class="col-md-4">
                            <img src="../assets/images/blog/blog-img-1.jpg" class="img-fluid rounded-start h-100" alt="...">
                            </div>
                            <div class="col-md-8">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below
                            as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            </div>
                            </div>
                            </div>
                            </div>

## Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

### Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use `display: flex;` to become attached with uniform dimensions starting at the `sm` breakpoint.

##### Card title

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

Last updated 3 mins ago

##### Card title

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

Last updated 3 mins ago

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

    <!-- Card
                              group -->
                            <div class="card-group">
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below
                            as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            </div>
                            </div>
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This card has supporting text below as a natural
                            lead-in to additional content.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            </div>
                            </div>
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below
                            as a natural lead-in to additional content. This card has even longer content than the first to
                            show that equal height action.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            </div>
                            </div>
                            </div>

### Grid cards

Use the Bootstrap grid system and its.row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s `.row-cols-1` laying out the cards on one column, and `.row-cols-md-2` splitting four cards to equal width across multiple rows, from the medium breakpoint up.

##### Card title

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

##### Card title

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

##### Card title

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

##### Card title

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

    <!-- Card
                              group -->
                            <div class="row
                                row-cols-1 row-cols-md-2 g-4">
                            <div class="col">
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a longer card with supporting text below
                            as a natural lead-in to additional content. This content is a little bit longer.</p>
                            </div>
                            </div>
                            </div>
                            <div class="col">
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a longer card with supporting text below
                            as a natural lead-in to additional content. This content is a little bit longer.</p>
                            </div>
                            </div>
                            </div>
                            <div class="col">
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a longer card with supporting text below
                            as a natural lead-in to additional content.</p>
                            </div>
                            </div>
                            </div>
                            <div class="col">
                            <div class="card">
                            <img src="../assets/images/placeholder/placeholder-4by3.svg" class="card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a longer card with supporting text below
                            as a natural lead-in to additional content. This content is a little bit longer.</p>
                            </div>
                            </div>
                            </div>
                            </div>

@@include("../partials/buy-template.html") @@include("../partials/scripts.html")