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
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.
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.
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.
Related Links
Bootstrap's card component documentation