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.
Card 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
.
![Propeller Card Media](https://opensource.propeller.in/assets/images/profile-pic.png)
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 and Description area
![Propeller Card Media](https://opensource.propeller.in/assets/images/profile-pic.png)
Media and Action area
![Propeller Card Media](https://opensource.propeller.in/assets/images/profile-pic.png)
Configuration 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 |