# Cards Cards provide a flexible content container that you can use to display a variety of content using contextual background colors, headers and footers. By default, cards fill in the full width of their parent element, however this can be customized via styling. ## Basic Example :::demo ```html

Card header

Lorem ipsum dolor sit amet.

Card footer

``` ::: ## Card Content Types Cards support a large variety of content including images, links, text, list groups and more. Make sure to check out the examples below. ### Card Body The core building block of a card is the ``. You can use it whenever you'd like to add a padded section within a card. :::demo ```html

Nunc quis nisl ac justo elementum sagittis in quis justo.

``` ::: #### Card Body Title and Subtitle You can display a card's Title and Subtitle using the `title` and `subtitle` props on the `` component. :::demo ```html

Nunc quis nisl ac justo elementum sagittis in quis justo.

``` ::: ### Card Image Using the `` component you can place a responsive image on top of the card that will adjust its width when the width of the card changes. :::demo ```html

this is the body contents

``` :::