A card is a flexible and extensible content container. It includes options for header and footer, a wide variety of content, contextual background colors, and powerful display options.
Card is a convenient means of displaying content composed of different elements. It is also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
A Card is constructed using blocks of content which include:
- An optional header
- A primary title
- Rich media
- Supporting text
These content blocks can be combined to create visual hierarchy within a card.
Title goes hereSecondary text
Include title and sub-title to the code by adding
.pmd-card-subtitle-text respectively inside wrapper class
Include Supporting text to the code by adding
Add action buttons to the card using
Add media to your card using
Use action icons for adding social media component
Card support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
Media and Description area
Media and Action area
The Propeller CSS classes apply various predefined visual enhancements to the Alert. The table lists the available classes and their effects.
||Wrapper class for card layout.||Required|
||Defines header section of the card||Optional|
||Defines primary content for the title section.||Optional|
||Defines secondary content for the title section.||Optional|
||Defines content section of the card.||Optional|
||Defines section for the action buttons/links for the card.||Optional|
||Defines section for the media for the card.||Optional|
||Used to manage spacing between inline media and text.||Optional|
||Used to create a card with darker background.||Optional|
||Used to provide shadow depth to card. Shadow depth inceases with the counting (pmd-z-depth, pmd-z-depth-1...pmd-z-depth-5)||Optional|