# Cards

Cards contain content and actions about a single subject. In Material Admin Pro, cards support a wide variety of content, including headers and footers, images, actions, and more. Some additions have been made past Bootstrap's default card markup in order to support Material's Design's card styling guidelines.

## Example Card

Cards in Material Admin Pro are constructed using HTML markup familiar to Bootstrap with a few additions. Custom elements and utilities have been created to extend Bootstrap's default styling to match Material's design system.

The example below shows a card created using Bootstrap default elements (image cap, card body, card title, card subtitle, and card text) with the custom card action bar element and the ripple utility.

## Our Changing Planet

### by Start Bootstrap

Visit ten places on our plant that are undergoing the biggest changes today.

## Default Card

The default styling for the cards in this toolkit match Material's outline card variant. These default cards have a white background with a subtle border and no elevation, appearing flat on the surface.

## Card Title

Card Body

## Raised Card

Another styling option for cards is the raised variation. Use the `.card-raised` class with a card to add a slight elevation to the component giving the card depth and emphasis.

## Card Title

Card Body

## Header & Footer

The card header and footer elements are built into the Bootstrap framework, but are not part of Material Design's specifications. They have been included and styled match Material Design's styling as closely as possible.

Card Header

## Card Title

Card Body

## Actions

Card actions part of Material Design's card specifications, but are not within the scope of Bootstrap's default card. A completely custom card action element has been created using the same naming logic used by other elements within Bootstrap's card component.

The buttons in the card action icons element make use of the custom icon buttons component as well.

## Card Title

Card Body

## Collapsible

Using Bootstrap's built-in collapse plugin, we use the card header as a collapse trigger for the card body to create this custom component.

Card Header expand_less

This is the contents of the collapisble card. Click on the card header to toggle this feature!

## Images

There are a few options available for using images within the card component. The most common is an image cap above the card body content. The top image cap, bottom image cap, image overlay, and images horizontal to the content are all supported.

### Image Caps

Card image caps can be placed above or below the card body using the `.card-img-top` or the `.card-img-bottom` classes as demonstrated below.

## Image Cap (Top)

Card Body

## Image Cap (Bottom)

Card Body

### Image Overlay

Alternatively, an image can overlay the entire background of the card component. Depending on the image you are using, you may need to use a text utility to change the text color of the content.

In the example below, the `.text-white` utility is used on the card title and card text.

## Card Title

Card Body

## Experimental Cards

With the many utility classes and custom styling available with Material Admin Pro, we have created an experimental card element called a card quick link. This card has it's own class, `.card-quick-link` which is appended to the `.card` element.

Some of the styling for this card experiment is for modern browsers only, and we recommend testing your desired browser when using this element in a production setting.

Card Quick Link

Card quick link text

Related Link arrow_upward

### Related Links

Bootstrap Card Documentation

Bootstrap's card component documentation

Related Link arrow_upward