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.
General Card
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.
Two-line item
Secondary text
Title goes here
Secondary textCard Elements
A Card is constructed using blocks of content which include:
- An optional header
- A primary title
- Rich media
- Supporting text
- Actions
These content blocks can be combined to create visual hierarchy within a card.
Title goes here
Secondary textInclude title and sub-title to the code by adding .pmd-card-title-text and .pmd-card-subtitle-text respectively inside wrapper class
.pmd-card-title.
Include Supporting text to the code by adding .pmd-card-body.
Add action buttons to the card using .pmd-card-actions.
Add media to your card using .pmd-card-media.
Use action icons for adding social media component
Content Type
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, Title, and Action area
Title goes here
Secondary textTitle, Media, Description and Action area
Two-line item
Secondary text Media and Description area
Media and Action area
Media, Title, and Action area
Title goes here
Secondary text
Use .pmd-card-media-inline along with .pmd-card in this type of card.
Title, Media, and Action area
Title goes here
Secondary text Use .pmd-card-media-inline along with .pmd-card in this type of card.
Media, and Action area
Title, Media, and Action area
Title goes here
Secondary text Use .pmd-card-media-inline along with .pmd-card in this type of card.
Title, Media, Description and Action area
Two-line item
Secondary text Title goes here
Secondary textConfiguration Options
The Propeller CSS classes apply various predefined visual enhancements to the Alert. The table lists the available classes and their effects.
| Propeller Classes | Effect | Remark |
|---|---|---|
.pmd-card |
Wrapper class for card layout. | Required |
.pmd-card-title |
Defines header section of the card | Optional |
.pmd-card-title-text |
Defines primary content for the title section. | Optional |
.pmd-card-subtitle-text |
Defines secondary content for the title section. | Optional |
.pmd-card-body |
Defines content section of the card. | Optional |
.pmd-card-actions |
Defines section for the action buttons/links for the card. | Optional |
.pmd-card-media |
Defines section for the media for the card. | Optional |
.pmd-card-media-inline |
Used to manage spacing between inline media and text. | Optional |
.pmd-card-inverse |
Used to create a card with darker background. | Optional |
.pmd-z-depth |
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 |