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 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 spacing utilities for the same. They have no fixed width, so they can be sized using the Bootstrap 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 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.
Include Supporting text to the code by adding .card-body.
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
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions.
Media and Title Card
Birthday
Media and Title Card
Cost Effective
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.
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.
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.
Icon, Title and Subtitle Card
170+
Calls from IIFT for the 2017-19 batch
Ask any technical question
See frequently asked questions
Icon, Title, Subtitle and Description Card
68
Components
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde dolores cupiditate vitae. consectetur adipisicing elit.
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.
Team Member Card
Diana Mason
Co-Founder
Inverse Card
Add bg-* and text-white 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.
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 Colums
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.
Testimonial Card
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.
Mitali Patel, Mumbai
Sep 24 2017
Blog Card
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...
Recent Posts Card
-
Christopher Columbus
This theme is Awesome!!
5 mins ago
-
Sandra Smith
Hey! I'm thankful to you
6 hours ago
-
Paul Andrew
Nice Work!
13:40 PM
Card with Timeline
-
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
Contact Card
Elizabeth I Mack
715-697-9795Locations Card
Denison
Address
2432 Florence Street, Denison, Texas - 75020Contact
903-463-5341/903-620-6754Events Card
Burhani Cricket Cup 2018
- today 18-Feb-18 to 12-March-18
-
location_on
Hyderabad
-
directions
KRR cricket Ground
Social Media Card
Posts
65
Followers
306
Likes
286
Most Popular Post
D'Fair
An event of the people, for the people & by the people of Digicorp!
Card with Overlay Effect
Description, Avatar and Subtitle area
More recently, we have described ourselves as a “devices and services” company. While the devices and services description was helpful in starting our transformation, we now need to hone in on our unique strategy. At our core, Microsoft is the productivity and platform company for the mobile-first and cloud-first world. We will reinvent productivity to empower every person and every organization on the planet to do more and achieve more.
abhishekdesai started this conversation with following comment.
think this is a very interesting outlook from the new CEO of Microsoft. @Founders #technology
People in this conversation
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 |