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