# Card > 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. ## Overview 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. `` 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 classes. Change the default `div` root tag to any other HTML element by specifying via the `tag` prop ```html

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

Go somewhere

``` ## Content types Cards support a wide variety of content, including images, text, list groups, links and more. The following are examples of what's supported inside a `` ### Card body The building block of a `` is the `` section which provides a padded section within a card. By default the `` content is automatically placed in a `` section: ```html

This is some content within the default <b-card-body> block of the <b-card> component. Notice the padding between the card's border and this gray <div>.

``` Disable the automatic `` section (and associated padding) by setting the prop `no-body` on the ``. ```html

This is some content without the default <b-card-body> section. Notice the lack of padding between the card's border and this gray <div>.

``` Note that with `no-body` enabled, the content of the `title` and `sub-title` props will not be rendered. Use the `` sub-component to place your own card body anywhere in a `` component that has `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. The title is rendered using the sub-component `` while the Sub Title is rendered using the sub-component ``. With sub-component ``, paragraph text can be added to the card. The last `` in the card body will have its bottom margin automatically removed (via CSS). Text within `` can also be styled with the standard HTML tags. Links can be added and placed next to each other by adding the `.card-link` class to a `` tag (or `` component). ```html

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

A second paragraph of text in the card.

Card link

Another link

``` ### 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 its width when the width of the card is changed. Alternatively you can manually place images inside `` using the sub-component ``. See the kitchen sink example below for usage. ```html

Top and Bottom

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

Left and Right (or Start and End)

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

``` **Note:** For left and right images, you may need to apply additional styles to classes `.card-img-left` and `.card-img-right`, as images will "stretch" in height if you have content that is taller than your image. Note headers and footers are not supported when images are left or right aligned. You may find the [Horizontal Card Layout](#horizontal-card-layout) example to be more flexible when creating a responsive horizontal card. #### Overlay image Place the image in the background of the card by setting the boolean prop `overlay`: ```html

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

``` #### Lazy loaded images Use the `` sub-component to lazy load images as they scroll into view. `` supports the same props as `` as well as many of the props of the [``](/docs/components/image#lazy-loaded-images) component. ### 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`) ```html

Header and footers using props.

Go somewhere

Header and footers using slots.

Go somewhere

``` ### 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. ```html

Card Title

Card Sub 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

This is a footer

``` ## Horizontal card layout Using a combination of grid components, utility classes and individual card sub-components, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the row grid gutters with the `no-gutters` prop on `` and use `md` props on `` to make the card horizontal at the `md` breakpoint. Class `rounded-0` removes the rounding of the `` corners while class `overflow-hidden` on `` will appropriately clip the image's corners based on the border-radius of the card. Further adjustments may be needed depending on your card content. ```html

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

``` ## 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. ```html

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

Go somewhere

``` ## 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 may require setting the prop `text-variant` to adjust the text color. ### Solid ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

``` ### Bordered ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

``` #### Variant to class mapping BootstrapVue `` variants are directly mapped to Bootstrap v4 card classes by pre-pending `bg-` (for solid) or `border-` (for bordered) to the above variant names. ### Header and footer variants You can also apply the solid and border variants individually to card headers and footers via the `header-bg-variant`, `header-border-variant`, `header-text-variant`, `footer-bg-variant`, `footer-border-variant`, and `footer-text-variant` props. ```html

Header and footers variants.

``` ### Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. ## Nav integration Integrate [``](/docs/components/nav) into card headers easily. **Using the `header` slot**: ```html

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

Go somewhere

``` **Using `` sub-component:** ```html

Active

Inactive

Disabled

Card Title

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

Go somewhere

``` For more information on using `` in card headers, refer to the [Navs documentation](/docs/components/nav). ## Card groups In addition to styling the content within cards, BootstrapVue includes a `` component for laying out series of cards. For the time being, these layout options are not yet responsive. ### Default card group Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing. When using card groups with footers, their content will automatically line up. ```html

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

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

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.

``` ### Card deck groups Need a set of equal width and height cards that aren't attached to one another? Use card decks by setting the `deck` prop. And just like with regular card groups, card footers in decks will automatically line up. ```html

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

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

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.

``` ### Card column groups Cards can be organized into Masonry-like columns with by wrapping them in a `` with the prop `columns` set. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn't a bulletproof solution yet. ```html

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Title

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

Last updated 3 mins ago

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.

```

Top and Bottom

Left and Right (or Start and End)

Header Slot

Hello World