Card

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.

Bootstrap 4 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.

Cards don't have a fixed margin so you can use Bootstrap 4 spacing utilities for the same. They have no fixed width, so they can be sized using the Bootstrap 4 sizing options.

Propeller Pro Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

                        

Propeller Card

Propeller Card consists of Bootstrap 4 HTML structure with Propeller customized classes. Simply add .pmd-card class besides the .card class to acheive the look and feel based on material design standards.

Propeller Pro Avatar

Two-line item

Secondary text

Propeller Pro Card image cap

Title goes here

Secondary text

Cards provide context and an entry point to more robust information and views. Don't overload cards 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

Mix and match multiple content blocks to create the card you need.

Title goes here

Secondary text

Include title and sub-title to the code by adding .card-title and .card-subtitle respectively inside wrapper class .card-header.

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 .card-body.

Propeller Pro Card image cap

Add media to your card using .pmd-card-media.

Add action buttons to the card using .card-footer.

Use action icons for adding social media component

Add footer to the card using .card-footer.


                        

Title, Description and Actions Card

Title goes here

Secondary text

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


                        

Media and Description Card

Propeller Pro Card image cap

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


                        

Media, Description and Footer Card

Propeller Pro Card image cap

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


                        

List with Icon Card

Listing Card

  • mood Single-line item with icon
  • notifications
    Single-line item with icon
  • person_add
    Single-line item with icon
  • share
    Single-line item with icon
  • drive_eta
    Single-line item with icon

                        

List with Avatar Card

  • Propeller Pro Avatar

    Three-line item

    In a three-line list, each tile contains a maximum of three lines of text.

  • Propeller Pro Avatar

    Three-line item

    In a three-line list, each tile contains a maximum of three lines of text.

  • Propeller Pro Avatar

    Three-line item

    In a three-line list, each tile contains a maximum of three lines of text.


                        

Media and Actions Card

Propeller Pro Card image cap

                        
Propeller Pro Card image cap

                        

Title, Media and Actions Card

Title goes here

Secondary text

Propeller Pro Card image cap

Title goes here

Secondary text

Propeller Pro Card image cap

Title goes here

Secondary text

Propeller Pro Card image cap

                        

Media, Title and Action Card

Propeller Pro Card image cap

Title goes here

Secondary text


                        

Title, Media, Description and Action Card

Propeller Pro Avatar

Two-line item

Secondary text

Propeller Pro Card image cap

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


                        

Media, Title, Action and Description Card

Propeller Pro Card image cap

Title goes here

Secondary text

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


                        

Kitchen Sink

Propeller Pro Card image cap

Title goes here

Secondary text

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

  • mood Single-line item with icon
  • notifications
    Single-line item with icon
  • person_add
    Single-line item with icon

                        

Form Card

Enquiry Form


                        

Icon, Title and Description Card

To add an icon as a media, use .pmd-card-icon in place of .pmd-card-media class.

Responsive Websites

As mobile web usage skyrockets, we make sure we code best practice HTML for all types of devices and screen sizes.


                        

Team / Client Details Card

Keith Dowd

Peach & Pie

Amorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nibh nisl. Cras etitikis mauris eget lorem ultricies ferme ntum a inti diam.


                        

Inverse Card

Add bg-* and text-white class to create colorful cards.

Propeller Pro Avatar

Two-line item

Secondary text

Propeller Pro Card image cap

Title goes here

Secondary text

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


                        

Card with Borders

Add .pmd-card-border class to apply borders to the bottom and top of header and footer of the card respectively.

Propeller Pro Avatar

Two-line item

Secondary text

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


                        

Image Overlay

Use class .card-img-overlay in place of .card-body class to move the text on the image.

Developer Library

A Developer Library

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat arcu ut orci porta, eget porttitor felis suscipit.
Sed a nisl ullamcorper, tempus augue at, rutrum lacus. Duis et turpis eros.


                        

Card Groups

Use class .card-group to create attached cards with equal width and height.

Propeller Pro Card image cap

Card Title

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

Propeller Pro Card image cap

Card Title

This card has even less content than the first and last card.

Propeller Pro Card image cap

Card Title

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


                        

Card Decks

To create cards with equal width and height but are not connected to each other use class .card-deck.

Propeller Pro Card image cap

Card Title

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

Propeller Pro Card image cap

Card Title

This card has even less content than the first and last card.

Propeller Pro Card image cap

Card Title

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


                        

Card Colums

To arrange cards of different heights in a masonry arrangement, use .card-columns class.

Propeller Pro Card image cap

Card Title

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

Listing Card

  • mood Single-line item with icon
  • notifications
    Single-line item with icon
  • person_add
    Single-line item with icon
  • share
    Single-line item with icon
  • drive_eta
    Single-line item with icon

Keith Dowd

Peach & Pie

Amorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nibh nisl. Cras etitikis mauris eget lorem ultricies ferme ntum a inti diam.

Propeller Pro Card image cap
Propeller Pro Avatar

Two-line item

Secondary text

Propeller Pro Card image cap

Title goes here

Secondary text

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


                        

Pro Cards

Great service

I have been ordering since two years and midnight has never disappointed me.On time services and great quality cake, which is making them reliable.

Propeller Pro Card image cap

Diana Mason

Co-Founder

170+

Calls from IIFT for the 2017-19 batch

Profile-pic

Why Maternal Mental Health Matters...

April 26, 2017 | 0 Comments

The first week in May is World Maternal Mental Health Awareness Week. Did you know Antenatal (or Prenatal) Depression is depression during pregnancy? Not only is it common, it may...

Ask any technical question

See frequently asked questions

68

Components

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde dolores cupiditate vitae. consectetur adipisicing elit.

Recent Posts

  • 40x40

    Christopher Columbus

    This theme is Awesome!!

    5 mins ago

  • 40x40

    Sandra Smith

    Hey! I'm thankful to you

    6 hours ago

  • 40x40

    Paul Andrew

    Nice Work!

    13:40 PM

Project Progress

  • Graphics changes. Need to change icons for few sections.

    Low Priority

  • Clean html/css/js code. Remove commented code from all the files. Also, enhance the code.

    High Priority

  • Make website responsive. Need to check the website in devices like Mobile and Ipad.

    High Priority

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Card. The table lists the available classes and their effects.

Propeller Classes Effect Remark
.pmd-card Wrapper class for card layout. Required
.pmd-card-media Defines section for the media for the card. Optional