Card
Bootstrap 4 Card with Material Design UI
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.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewherePropeller 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.
Two-line item
Secondary text
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.
Title goes here
Secondary text
Use .pmd-title-separator class to add a separator to the card title.
Title goes here
Secondary text
Use .pmd-title-separator-right along with .text-right class to add a separator to the card title to the right.
Include Supporting text to the code by adding .card-body.
Add footer to the card using .card-footer.
Use .pmd-card-border along with .card-footer or .card-header to add border to header / footer in the card.
Add action buttons to the card using .card-footer.
Use action icons for adding social media component
Add .pmd-btn-fill along with .card-footer to create a filled action buttons card footer.
Add .pmd-btn-fill and .btn-group along with .card-body to add a button group in the card.
Add media to your card using .pmd-card-media.
Include an icon as a media in the card by adding .pmd-card-icon.
Use .pmd-floating-content-wrapper and .pmd-floating-content-{tc,tl,tr,bc,br,bl} to add a floating icon in the card.
Title goes here
Secondary text
Use .pmd-card-dark along with a background class to create inverse card.
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
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
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
-
Three-line item
In a three-line list, each tile contains a maximum of three lines of text.
-
Three-line item
In a three-line list, each tile contains a maximum of three lines of text.
-
Three-line item
In a three-line list, each tile contains a maximum of three lines of text.
Media and Actions Card
Title, Media and Actions Card
Title goes here
Secondary text
Title goes here
Secondary text
Title goes here
Secondary text
Media, Title and Action Card
Title goes here
Secondary text
Title, Media, Description and Action Card
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.
Media, Title, Action and Description 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.
Kitchen Sink
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 .pmd-card-dark class to create colorful cards.
Two-line item
Secondary text
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.
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.
Card Groups
Use class .card-group to create attached cards with equal width and height.
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 Title
This card has even less content than the first and last card.
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.
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 Title
This card has even less content than the first and last card.
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 Columns
To arrange cards of different heights in a masonry arrangement, use .card-columns class.
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.
Two-line item
Secondary text
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.
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 |
.pmd-card-border |
Used to apply border below the header or above the footer of the card. | Optional |
.pmd-title-separator |
Used to apply separator below the title. | Optional |
.pmd-btn-fill |
Used to create a full width button in the card footer. | Optional |
.pmd-card-dark |
Used to apply white color fonts to the text applied over the card-media. | Optional |
.pmd-card-icon |
Defines section for the icon for the card | Optional |
.pmd-card-overlay |
Used to apply overlay effect to the card. | Optional |
.pmd-view-details |
Used to show the text on the hover in the .pmd-card-overlay class. | Optional |
.pmd-title-separator |
Used to add separator below the title. | Optional |
.pmd-title-separator-right |
Used to add separator below the title when the text is right aligned. | Optional |
.pmd-floating-content-wrapper |
Used to wrap the floating icon. | Optional |
.pmd-floating-content-{tc,tl,tr,br,bc,bl} |
Used to set the position of the floating icon. | Optional |