Material Design Cards 2014 Models

The card container is the only required element in a card. All other elements shown here are optional. Card layouts can vary to support the types of content they contain.

Material Design Card #1

"Card container", "primary title", "supporting text", "divider" and "action/link".

Google announced Material Design - on June 25, 2014

Material Design (codenamed Quantum Paper) is a design language that Google developed in 2014. The main purpose of material design is creation of new visual language that combines principles of good design with technical and scientific innovation.

Grid-based layouts - responsive

Expanding on the "card" motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

New design language - Material Design

Google states that their new design language is based on paper and ink but implementation takes place in an advanced manner. The canonical implementation of Material Design for web application user interfaces is called Polymer.

Material Design Card #2

"Card container", "rich media", "primary title", "supporting text", "divider" and "action/link".

Understanding the goals and principles of Material Design

Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information.

The card component is ready for use

Cards are a convenient means of coherently displaying related content that is composed of different types of objects.

Self-contained pieces of paper with data

I am a very simple card. I am good at containing small bits of information.

Material Design Card #3

"Card container", "rich media", "primary title", "supporting text", "divider" and "action/link".

MDC Card

Cards contain rich media, primary title, supporting text, and actions. Cards contain content and links about a single subject.

Card-Based Layout

Cards are composed of different content blocks, which are typically laid out vertically.

Card Elements

MDC Card does provide styles for two common card elements: rich media (images or video) and actions.

Material-UI

A card is a flexible and extensible content container. Material design cards with demos and code snippets.

--
Ref:
https://getmdl.io/components/#cards-section
https://materializecss.com/cards.html

HTML/CSS (Material Design Card #1)

<div style="margin:0;padding:10px;" class="col-xs-12 col-sm-12 col-md-6"> <div style="text-align:left;border-radius:2px;margin:0;padding:0;color:#000;box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);"> <div style="padding:16px;background:#fff;border-bottom:1px solid #CFD8DC;"> <a href="#" style="display:block;text-decoration:none;font-size:20px;" title="Google announced Material Design">Google announced Material Design - <span style="color:#000;">on June 25, 2014</span></a> </div> <div style="padding:16px;background:#fff;border-bottom:1px solid #CFD8DC;"> Material Design (codenamed Quantum Paper) is a design language that Google developed in 2014. The main purpose of material design is creation of new visual language that combines principles of good design with technical and scientific innovation. </div> </div> </div>

HTML/CSS (Material Design Card #2)

<div style="margin:0;padding:10px;" class="col-xs-12 col-sm-12 col-md-6"> <div style="text-align:left;border-radius:2px;display:block;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);"> <div style="padding:0;background:#fff;color:#000;"> <div style="margin:0;padding:0;" class="col-xs-12 col-sm-12 col-md-3"><a href="#" title="Understanding the goals and principles of Material Design"><img src="../images/material-design/material-design-article-01.jpg" alt="Understanding the goals and principles of Material Design" style="width:100%;height:auto;" /></a></div> <div style="margin:0;padding:0;" class="col-xs-12 col-sm-12 col-md-9"> <a href="#" title="Understanding the goals and principles of Material Design" style="display:block;padding:18px 18px 7px 18px;text-decoration:none;font-size:18px;border-bottom:1px solid #CFD8DC;">Understanding the goals and principles of Material Design</a> <div style="padding:7px 18px 18px 18px;background:#fff;"> Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. </div> </div> <div style="clear:both;"></div> </div> </div> </div>

HTML/CSS (Material Design Card #3)

<div style="margin:0;padding:10px;" class="col-xs-12 col-sm-12 col-md-3"> <div style="background:#fff;color:#000;padding:0;margin:0 0 20px 0;display:block;overflow:hidden;text-align:left;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);"> <div style="padding:0;background:#fff;"> <a href="#" title="Material Design Card - MDC Card"><img src="../images/material-design/material-design-article-04.jpg" style="width:100%;height:auto;" alt="Material Design Card - MDC Card" /></a> <div style="clear:both;"></div> </div> <a href="#" title="Material Design Card - MDC Card" style="display:block;padding:18px 18px 7px 18px;text-decoration:none;font-size:20px;border-bottom:1px solid #CFD8DC;">MDC Card</a> <div style="padding:16px;background:#fff;"> <div style="text-align:left;font-size:14px;font-weight:normal;margin-bottom:8px;padding-bottom:4px;">Cards contain rich media, primary title, supporting text, and actions. Cards contain content and links about a single subject.</div> </div> </div> </div>