Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other components.

<b-card> has no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized via styles or standard Bootstrap V4 sizing clases.

Change the default div root tag to any other HTML element by specifying via the tag prop

Card Title

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

Go somewhere

<div>
  <b-card title="Card Title"
          img-src="https://lorempixel.com/600/300/food/5/"
          img-alt="Image"
          img-top
          tag="article"
          style="max-width: 20rem;"
          class="mb-2">
    <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>
    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- card-1.vue -->

Content types

Cards support a wide variety of content, including images, text, list groups, links and more. Below are examples of what’s supported.

Card Body

The building block of a card is the .card-body section which provides a padded section within a card. By default the <b-card> content is placed in the .card-body section:

This is some text within the default card block.

<b-card class="text-center">
  This is some text within the default card block.
</b-card>

<!-- card-body-1.vue -->

Disable the .card-body section (and associated padding) by setting the prop no-body.

This is some text without the default card body section. Notice the lack of padding.

<b-card no-body class="text-center">
  This is some text without the default card body section. Notice the lack of padding.
</b-card>

<!-- card-body-2.vue -->

Note that with no-body enabled, title and sub-title will not be rendered.

Use the <b-card-body> sub-componet to place your own .card-body anywhere in a <b-card> component with no-body set.

Titles, text, and links

Card titles are adding via the title prop, and sub titles are added via the sub-title prop. Links can be added and placed next to each other by adding the .card-link class to a tag (or <b-link>).

With class .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

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

<div>
    <b-card title="Card title"
            sub-title="Card subtitle">
        <p class="card-text">
            Some quick example text to build on the <em>card title</em> and make up the bulk of the card's content.
        </p>
        <a href="#"
           class="card-link">Card link</a>
        <b-link href="#"
                class="card-link">Another link</b-link>
    </b-card>
</div>

<!-- card-text-1.vue -->

Images

The prop img-src places an image on the top of the card, and use the img-alt prop to specify a string to be placed in the image's alt attribute. The image specified by the img-src prop will be responsive and will adjust it's width when the width of the card is changed.

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

<div>
    <b-card-group deck>
        <b-card img-src="https://placekitten.com/1000/300"
                img-alt="Card image"
                img-top>
            <p class="card-text">
                Some quick example text to build on the card and make up the bulk of the card's content.
            </p>
        </b-card>
        <b-card img-src="https://placekitten.com/1000/300"
                img-alt="Card image"
                img-bottom>
            <p class="card-text">
                Some quick example text to build on the card and make up the bulk of the card's content.
            </p>
        </b-card>
    </b-card-group>
</div>

<!-- card-img-1.vue -->

Place the image in the background of the card by setting the boolean prop overlay:

Image Overlay

Subtitle

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

<div>
  <b-card overlay
          img-src="https://lorempixel.com/900/250/sports/6/"
          img-alt="Card Image"
          text-variant="white"
          title="Image Overlay"
          sub-title="Subtitle">
    <p class="card-text">
      Some quick example text to build on the card and make
      up the bulk of the card's content.
    </p>
  </b-card>
</div>

<!-- card-img-2.vue -->

Header and footer

Add an optional header and/or footer within a card via the header/footer props or named slots. You can control the wrapper element tags used by setting the header-tag and footer-tag props (both default is div)

featured

Title

Header and footers using props.

Go somewhere

Title

Header and footers using slots.

Go somewhere

<div>
    <b-card-group deck>
        <b-card header="featured"
                header-tag="header"
                footer="Card Footer"
                footer-tag="footer"
                title="Title">
            <p class="card-text">Header and footers using props.</p>
            <b-button href="#"
                      variant="primary">Go somewhere</b-button>
        </b-card>
        <b-card title="Title"
                header-tag="header"
                footer-tag="footer">
            <h6 slot="header"
                class="mb-0">Header Slot</h6>
            <em slot="footer">Footer Slot</em>
            <p class="card-text">Header and footers using slots.</p>
            <b-button href="#"
                      variant="primary">Go somewhere</b-button>
        </b-card>
    </b-card-group>
</div>

<!-- card-header-footer-1.vue -->

Kitchen sink Example

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.

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

This is a footer

<div>
    <b-card no-body
            style="max-width: 20rem;"
            img-src="https://placekitten.com/380/200"
            img-alt="Image"
            img-top>
        <h4 slot="header">Hello World</h4>
        <b-card-body>
            <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>
        </b-card-body>
        <b-list-group flush>
            <b-list-group-item>Cras justo odio</b-list-group-item>
            <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
            <b-list-group-item>Vestibulum at eros</b-list-group-item>
        </b-list-group>
        <b-card-body>
            <a href="#"
               class="card-link">Card link</a>
            <a href="#"
               class="card-link">Another link</a>
        </b-card-body>
        <b-card-footer>This is a footer</b-card-footer>
        <b-card-img src="https://placekitten.com/480/210"
                    alt="Image"
                    bottom></b-card-img>
    </b-card>
</div>

<!-- card-kitchen-1.vue -->

Text variants

By default, cards use dark text and assume a light background. You can reverse that by toggling the color of text within, as well as that of the card’s sub-components, via the prop text-variant. Then, specify a dark background variant.

Card Title

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

Go somewhere

<b-card  bg-variant="dark" text-variant="white" title="Card Title">
  <p class="card-text">
    With supporting text below as a natural lead-in to additional content.
  </p>
  <b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>

<!-- card-text-1.vue -->

Background and Border variants

Cards include their own variant style for quickly changing the background-color and of a card via the bg-variant and border-variant props. Darker solid variants my require setting the prop text-variant to adjust the text color.