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 text
Card provide context and an entry point to more robust information and views. Don't overload card with extraneous information or actions.

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 text

Include 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.

Card provide context and an entry point to more robust information and views. Don't overload card with extraneous information or actions.

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 text

Title, Media, Description and Action area

Two-line item

Secondary text
Card provide context and an entry point to more robust information and views. Don't overload card with extraneous information or actions.

Media and Description area

Card provide context and an entry point to more robust information and views. Don't overload card with extraneous information or actions.

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 text
Card provide context and an entry point to more robust information and views. Don't overload card with extraneous information or actions.

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