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.
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.
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.
Another styling option for cards is the raised variation. Use the
class with a card to add a slight elevation to the component giving the card depth and emphasis.
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.
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.
This is the contents of the collapisble card. Click on the card header to toggle this feature!
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.
Card image caps can be placed above or below the card body using the
classes as demonstrated below.
Image Cap (Top)
Image Cap (Bottom)
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
utility is used on the card title and card text.
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,
which is appended to the
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.