top

How To Easily Create Modern Material Design Cards With HTML and CSS

Material Design was originally developed by Google in 2014. Since then, it has been used in many Google products, including Gmail, Docs, Play and Android apps. Material design is becoming increasingly popular and is increasingly being used for modern web applications. In fact, the material design has long become a common standard.Now the complete focus is on the latest release i.e Material Design 2. Google provides a rich set of fundamentals, making it easy for web designers and developers to adopt this design language. Material Design which is a universal design language is intended to give designers even more potential to create individual and system or browser-compatible applications with its revised version. And by “more” I mean “infinite” considering various combination possibilities, such as through the use of typography, colors, shades, contrast ratios, and shapes.In this tutorial, I’d like to show you how to create the most popular Material Design Element — the Card. Using readable HTML and a unique CSS makes assembling a card child’s play. Let’s get started.1. Step-by-step Guide to Creating MD CardsThe card container is the only element required in a card. All other elements shown here are optional. Card layouts can vary, so that different content can be presented as a card is appealing.Cards are surfaces that represent content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements such as text and pictures should be placed in such a way that they clearly refer to the hierarchy. In the best-known cases, the card is a teaser for a blog post.1.1 Structure of the cardA standard card includes the enclosing parent element .card, within which children’s or content blocks can be displayed variably and differently. All blocks as a whole refer to a single subject or target. Depending on the level of the hierarchy, the content may receive different emphases.1.2 Card layout elementsThe structure of the layout elements of a Card is very simple. Let’s define the div boxes or content blocks with the class names described by the Material Design Style Guide for the Card elements.                               The anatomy of Material Design Card is composed of the card itself, optional header, a media block, the primary title,                                                                                                                           supporting text and action elements, such as buttons and clickable iconsCard layout elements:- Card — Optional header — Media — Primary title — Supporting text — ActionsHTML:<div class="card"> <div class="optional-header"></div> <div class="media"></div> <div class="primary-title"></div> <div class="supporting-text"></div> <div class="actions"></div> </div>The enclosing card container div.card is the only required element in a card. All other elements are optional. The size of the card is determined by the areas these elements occupy.Each layout element contains additional elements that are very useful for the clear presentation of different emphases.                                The construction of material design includes child elements such as for example the thumbnail image (1), header text (2),                                                                                                                                     subheading (3), media (4), Supporting text (5), buttons (6), icons (7).Thumbnail [optional]Cards can contain thumbnails to display an avatar, logo, or icon.Header text [optional]Header text can include things like the name of a photo album or article.Subhead [optional]Subhead or Secondary Text may contain textual elements such as an article subheading or a marked location.Media [optional]Cards can contain a variety of media, including photos and graphics, e.g. Weather icons.Supporting text[optional]Supporting text includes text such as an article summary or a restaurant description.Buttons [optional]Cards can contain buttons for actions.Icons [optional]Cards can contain icons for actions.The arrangement of related elements can be easily determined.To become more concrete, I’ll show you the standard layout of a card. Starting with the element div.card.2. Card elements2.1 CardHTML:<div class="card">…</div>And here comes the CSS for the card element.CSS:.card { background-color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); color: rgba(0,0,0,.87); margin: 8px; min-width: 290px; overflow: hidden; position: relative; } .card::after { clear: both; } .card::after, .card::before { content: ""; display: block; }That’s it — in principle, all mandatory elements for the card are hereby implemented.The following are the optional elements. It’s the elements that make the card meaningful. Let’s now define the optional header together.2.2 Optional Header                                          The layout elements for the optional header includes the thumbnail (1) and the primary title with the title/primary text (2),                                                                                                                                                                      and the subhead/secondary text (3).HTML:<div class="card">  <div class="optional-header">...</div> </div>CSS:.optional-header { min-height: 40px; padding: 16px; position: relative; }2.2.1 Thumbnail (1)The thumbnail -div contains an img-element depending on the conversion logic. If the thumbnail image has a clear reference to the content of the card and thus represents a possibly desired factor for search engine optimization, the image should be loaded via the HTML element img.HTML:<div class="card">  <div class="optional-header">   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div> </div> </div>CSS:.thumbnail { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; float: left; height: 40px; position: relative; width: 40px; } .thumbnail img { background-color: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .thumbnail--24x24 img { height: 24px; width: 24px; } .thumbnail--28x28 { margin-right: 4px; } .thumbnail--28x28 img { height: 28px; width: 28px; } .thumbnail--32x32 { margin-right: 8px; } .thumbnail--32x32 img { height: 32px; width: 32px; } .thumbnail--36x36 { margin-right: 12px; } .thumbnail--36x36 img { height: 36px; width: 36px; } .thumbnail--40x40 { margin-right: 16px; } .thumbnail--40x40 img { height: 40px; width: 40px; }2.2.2 Primary Title:Title/Primary text (2), and the Subhead/Secondary text (3)The element for the primary title is div.primary-titleThe element for the title is div.titleThe element for the subtitle div.subhead<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div> </div>CSS:.optional-header { min-height: 40px; padding: 16px; position: relative; } .optional-header .action-icons { float: right; position: relative; right: -8px; top: 2px; } .optional-header .primary-title { bottom: auto; display: inline-block; padding: 0; position: absolute; top: 50%; -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .optional-header + .primary-text { margin-top: calc(24px/2/2); } .optional-header + .supporting-text { padding-top: 0; } .primary-title .optional-header { padding-left: 0; padding-right: 0; } .subhead, .secondary-text { color: rgba(0,0,0,.54); font-size: 14px; } .title { font-size: 14px; font-weight: 500; } .title + .subhead { margin-top: 7px; } .title { line-height: 1.2; }2.3 Media                                                           The media element (1) div.media contains an img element over which the image is to be loaded.HTML:<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div>  <div class="media"><img src="https://path/to/the/picture.png"></div> </div>The media block div.media can be represented by different aspect ratios. The Style Guide recommends 16: 9, 3: 2, 4: 3, 1: 1, 3: 4, 2: 3 formats.In our example, the image should be displayed in 16: 9 format. For this, I add the class media--16-9 to the media element:<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div>  <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div> </div> CSS:.media { position: relative; } .media .action-icon { color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,0.54); } .media .actions { background-image: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0)); color: #fff; position: absolute; width: 100%; } .media .optional-header { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; display: block; float: left; width: 100%; z-index: 100; } .media .optional-header .primary-title { background-image: none; width: auto; } .media .primary-title { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.46)); bottom: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 16px 16px 24px; position: absolute; width: 100%; z-index: 1; } [class*='media--'] { height: 0; overflow: hidden; } .media--1-1 { padding-bottom: 100%; } .media--16-9 { padding-bottom: 56.25%; } .media--16-9 > img, .media--3-2 > img, .media--4-3 > img { height: auto; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; } .media--16-9 img, .media--3-2 img, .media--4-3 img, .media--80x80 img, .media--1-1 img, .media--3-4 img, .media--2-3 img { position: absolute; } .media--2-3 { padding-bottom: 150%; } .media--3-2 { padding-bottom: 66.66%; } .media--3-4 { padding-bottom: 133.33%; } .media--4-3 { padding-bottom: 75%; } .media--80x80 { margin: 16px; padding-bottom: 80px; width: 80px; } .media--80x80 > img, .media--1-1 > img, .media--3-4 > img, .media--2-3 > img { height: 100%; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); width: auto; } 2.4 Supporting Text                           The div.supporting-text element (1) should display supporting content, such as an article summary, hotel or restaurant description.HTML:<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div>  <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>  <div class="supporting-text">Supporting text.</div> </div>CSS:.primary-title + .supporting-text, .optional-header + .supporting-text { padding-top: 0; } .supporting-text { font-size: 14px; line-height: 1.5; padding: 16px; }2.5 Actions                                              The action block div.actions serves as a concrete call to action through action buttons (1) or action icons (2).HTML:<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div>  <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>  <div class="supporting-text">Supporting text.</div>  <div class="actions">...</div> </div>2.5.1 Action ButtonsAction buttons (1) can be included within the action block.HTML:<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div>  <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>  <div class="supporting-text">Supporting text.</div>  <div class="actions">    <div class="action-buttons">      <button class="button" type="button">Action 1</button>      <button class="button" type="button">Action 2</button>    </div>  </div> </div>2.5.2 Action IconAction Icons (2) are also used here.HTML:<div class="card">  <div class="optional-header">    <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>    <div class="primary-title">      <div class="title">Title</div>      <div class="subhead">Subhead</div>    </div>  </div>  <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>  <div class="supporting-text">Supporting text.</div>  <div class="actions">    <div class="action-buttons">      <button class="button" type="button">Action 1</button>      <button class="button" type="button">Action 2</button>    </div>    <div class="action-icons float-right"><i class="material-icons action-icon" role="button" title="Share">share</i><i class="material-icons action-icon" role="button" title="More options">more_vert</i></div>  </div> </div>CSS:.button { background-color: transparent; border: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: inherit; cursor: pointer; display: inline-block; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.75px; line-height: 36px; min-width: 64px; padding: 0 8px; text-align: center; text-transform: uppercase; } .button, .action-icon { -webkit-transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1); transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1); } .button--raised { -moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); -o-transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1); -webkit-transition: 0 .28s cubic-bezier(.4, 0, .2, 1); transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1), 0 .28s cubic-bezier(.4, 0, .2, 1); } .button--raised:focus, .button--raised:hover { -moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); } .button--purple { background-color: #6200EE; color: #fff; } .button:hover, .action-icon:hover { background-color: rgba(158,158,158,0.2); } .button:active, .action-icon:active { background-color: rgba(158,158,158,0.4); } .button:focus:not(:active), .action-icon:focus:not(:active) { background-color: rgba(0,0,0,.12); } .button[disabled] { color: rgba(0,0,0,.26); cursor: default; } .button[disabled]:hover { background: none; } .action-buttons, .action-icons { display: inline-block; vertical-align: middle; } .action-icon { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-sizing: border-box; cursor: pointer; margin: 0 2px; outline: none; padding: 6px; } .action-icons { color: rgba(0,0,0,0.54); } .actions { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 52px; padding: 8px; position: relative; z-index: 1; }The HTML is manageable and readable. The CSS for these examples is even quite simple with 400 lines  including  note dependencies, browser and system compatibility and flexibility of the elements. 3. Card examplesFinally, I’ll show you three different examples of the use of cards. It helps you to understand how flexible cards can be represented in the presentation context.3.1 PostThe above image shows a Material Design Card to:Display feed content with a small teaser image (1) Display feed content with big teaser image along with comment filed (2)3.1.1 Feed (1)If you are an Android user, you might be aware of this card representation (shown in the left). It’s great for feed content or news main pages. The advantage is that on a small card surface, the most important content is clearly tapped. Check the below code to create a material design card for feed content with a small teaser image. HTML:<div class="card">      <div class="media media--80x80 float-right"> <img src="https://cdn.pixabay.com/photo/2016/02/13/12/27/aurora-1197755_1280.jpg" alt="" width="640" height="426"> </div>      <div class="primary-title">        <div class="primary-text">Hundreds of New Planets Found</div>        <div class="secondary-text">Astronomy</div>      </div>      <div class="supporting-text"> Supporting text include text like an article summary or a restaurant description.</div>      <div class="actions">        <div class="action-buttons">          <button class="button" type="button">Read More</button>        </div>        <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>      </div>    </div>3.1.2 Post with comment field (2)This card (shown in the right) can demonstrate the detail view of the previous feed card. We recognize similarities to the multi-column card representation that we know from Google Plus. Of course, it can also be used for desktop applications, even outside of a multi-column layout. Check the below code to create a material design card for feed content with big teaser image along with comment field. HTML:<div class="card">      <div class="media media--16-9">        <div class="actions">          <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Bookmark">bookmark_border</i> <i class="material-icons action-icon" role="button" title="Share">share</i> </div>        </div>        <div class="primary-title">          <div class="secondary-text">Astronomy</div>          <div class="primary-text">Hundreds of New Planets Found</div>        </div>        <img src="https://cdn.pixabay.com/photo/2016/02/13/12/27/aurora-1197755_1280.jpg" alt="" width="640" height="426"> </div>      <div class="optional-header">        <div class="thumbnail thumbnail--40x40"><img src="https://randomuser.me/api/portraits/men/99.jpg" alt="" width="40" height="40"></div>        <div class="primary-title">          <div class="title">Dan West</div>          <div class="subhead">Scientist</div>        </div>        <div class="action-icons"> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>      </div>      <div class="supporting-text"> Supporting text include text like an article summary or a restaurant description. Lorem ipsum dolor sit amet, vel ea quis suscipit. Modus scriptorem at sit, vix malorum appellantur eu an nec assum mazim pericula.</div>      <div class="optional-header">        <div class="thumbnail thumbnail--24x24"><img src="https://lh3.googleusercontent.com/-GvhDyQYoDZw/AAAAAAAAAAI/AAAAAAAAAAA/AIcfdXCR7Z9juYjHkI2MjHvfGmtowYerFw/s64-c-mo/photo.jpg" alt="" width="24" height="24"></div>        <div class="primary-title">          <textarea class="subhead" placeholder="Kommentar hinzufügen…" aria-label="Kommentar hinzufügen…" role="textbox"></textarea>        </div>      </div>      <div class="actions">        <div class="action-icons"> <i class="material-icons action-icon" role="button" title="Share">camera_alt</i> <i class="material-icons action-icon" role="button" title="More options">link</i> </div>        <div class="action-buttons float-right">          <button class="button" type="button">Cancel</button>          <button class="button" type="button" disabled="">Post</button>        </div>      </div>    </div>3.2 ReportThe above image represents:Left: Displaying travel report with small teaser Image (1). Right: Displaying travel report with big teaser Image (2).This example shows a card with little text. The idea is that the image and the title alone have such a strong meaningfulness that makes the reader curious to know more. Especially the second example of this variant can serve as an entry for travel blogs.In particular, the oversized 2: 3 aspect ratio in relation to the title and category name let the reader quickly guess what the content is about. This variant is suitable for topics that have a great effect on the mood of the user through visual imagery and also shows a certain importance. Examples of website formats include travel/culture reports, journalistic contributions to foreign affairs events. But also the culinary recipes can be presented attractively.3.2.1 Report with small teaser image (1)Check the below code to create a material design card for travel report with a small teaser image.HTML:<div class="card">      <div class="media media--16-9">        <div class="primary-title">          <div class="primary-text">The Many Lives Along the Yangtze River</div>          <div class="secondary-text">Travel</div>        </div>        <img src="https://cdn.pixabay.com/photo/2016/11/03/04/03/ace-1793425_1280.jpg" alt="" width="640" height="426"> </div>      <div class="actions">        <div class="action-buttons">          <button class="button" type="button">Read report</button>        </div>        <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>      </div>    </div>3.2.2 Report with big teaser Image (2)Check the below code to create a material design card for travel report with big teaser image.HTML:<div class="card">      <div class="media media--2-3">        <div class="primary-title">          <div class="optional-header">            <div class="thumbnail thumbnail--40x40"><img src="https://randomuser.me/api/portraits/women/47.jpg" alt="" width="40" height="40"></div>            <div class="primary-title">              <div class="title">Emma Freeman</div>              <div class="subhead">Travel Journalist</div>            </div>          </div>          <div class="primary-text">The Many Lives Along the Yangtze River</div>          <div class="secondary-text">Travel</div>        </div>        <img src="https://cdn.pixabay.com/photo/2016/11/03/04/03/ace-1793425_1280.jpg" alt="" width="960" height="640"> </div>      <div class="actions">        <div class="action-buttons">          <button class="button" type="button">Read report</button>        </div>        <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>      </div>    </div>3.3 Travel and EventsThe above image represents:Left: Design a card to display hotel booking (1)Right: Design a small card to display hotel booking (2).During an earlier project, I developed the design for a marketplace for travel and accommodation bookings. For the home page, I opted for a very similar card design to display the top offers demanding. In a 3-, a maximum of 4 column layout, this card type comes great into its own.3.3.1 Book a hotel (1)Check the below code to create a material design card for hotel booking with a big teaser image.HTML:<div class="card card__dark card__dark--magenta">      <div class="media media--16-9"> <img src="https://cdn.pixabay.com/photo/2018/01/12/11/55/london-3078109_960_720.jpg" alt="" width="640" height="426"> </div>      <div class="primary-title">        <div class="primary-text float-right">$99</div>        <div class="primary-text">Apple Apartments Limehouse</div>        <div class="secondary-text">          <div class="action-icons icon-color--yellow"> <i class="material-icons action-icon" role="button" title="Share">star</i> <i class="material-icons action-icon" role="button" title="More options">star</i> <i class="material-icons action-icon" role="button" title="More options">star</i></div>          -Hotel</div>      </div>      <div class="supporting-text">London, 2.8 km to Tower Bridge</div>      <div class="actions border-top">        <div class="action-buttons float-right">          <button class="button" type="button">View Details</button>        </div>        <div class="action-icons"> <i class="material-icons action-icon" role="button" title="Share">wifi</i> <i class="material-icons action-icon" role="button" title="More options">spa</i> <i class="material-icons action-icon" role="button" title="More options">pool</i></div>      </div>    </div>3.3.2 Book a hotel — small (2)The small variant is suitable for complete ordering process, such as for webshops with dashboard features, allowing the user to see through their system interactions, or for order confirmation email, so that your booking can be summarized in a very condensed way.Check the below code to create a material design card for hotel booking with a small teaser image.HTML:<div class="card card__small card__dark card__dark--magenta">      <div class="media"> <img src="https://cdn.pixabay.com/photo/2018/01/12/11/55/london-3078109_960_720.jpg" alt="" width="640" height="426"> </div>      <div class="primary-title">        <div class="primary-text">Apple Apartments Limehouse</div>        <div class="secondary-text">June 21 - 28</div>      </div>      <div class="actions border-top">        <div class="action-buttons">          <button class="button" type="button">View Details</button>        </div>      </div>    </div>Closing wordsFor the implementation of Material Design for Web applications, there are a variety of CSS frameworks such as Material Design Lite, Materialize, and many more. You can find a list of popular frameworks here.Building various front-end frameworks is really significant. Teams can achieve business and customer goals more quickly through the implementation of these frameworks, that was not previously possible. The quality assurance is provided by the framework as well. Good documentation makes the HTML easy to integrate and CSS adjustments are rarely necessary. Ideally, you no longer need any CSS knowledge, only the willingness to work with the documentation is required.On the other hand, I also see a drastic change of direction — everything is made available through HTML, CSS and JavaScript modules. The modern front-end designer and developer has thus become the administrator and editor of the code, rather than thinking creatively about solutions.If I compare the solutions of these frameworks, I notice that cards are often displayed differently: distances, font sizes, shading, etc. All of them deviate from the material design guidelines. In my observations, there are striking differences between how the design guidelines are interpreted. In doing so, I see that although child elements can be represented in a correct distance to the mother element, the inner child element also shows certain characteristics and influences distances to the element. Although technically thought and implemented correctly, the visual effect is not clear.Example: The title itself has a certain distance to its element, which is often ignored in calculations. As a result, the optical distance is not maintained correctly. The pixel-accurate implementation is therefore incorrect. I think about how to make code scalable and flexible in order to achieve an optimal result in a way that comes so close to the idea of material design on a visual level in terms of perfection that it matches the creator thought. And I succeed through critical questioning and trying out. You will find that you are encountering obstacles. And that’s what makes a valuable CSS developer — by identifying and overcoming obstacles, then producing consistent and clean code.All card examples including HTML and CSS  code in this guide are manageable, very flexible and versatile.https://codepen.io/JonathanTorke/pen/WyzPGXHappy coding!!
Rated 4.0/5 based on 32 customer reviews
Normal Mode Dark Mode

How To Easily Create Modern Material Design Cards With HTML and CSS

Jonathan Torke
Blog
06th Jul, 2018
How To Easily Create Modern Material Design Cards With HTML and CSS

Material Design was originally developed by Google in 2014. Since then, it has been used in many Google products, including Gmail, Docs, Play and Android apps. Material design is becoming increasingly popular and is increasingly being used for modern web applications. In fact, the material design has long become a common standard.

Now the complete focus is on the latest release i.e Material Design 2. Google provides a rich set of fundamentals, making it easy for web designers and developers to adopt this design language. Material Design which is a universal design language is intended to give designers even more potential to create individual and system or browser-compatible applications with its revised version. And by “more” I mean “infinite” considering various combination possibilities, such as through the use of typography, colors, shades, contrast ratios, and shapes.

In this tutorial, I’d like to show you how to create the most popular Material Design Element — the Card. Using readable HTML and a unique CSS makes assembling a card child’s play. Let’s get started.


1. Step-by-step Guide to Creating MD Cards

The card container is the only element required in a card. All other elements shown here are optional. Card layouts can vary, so that different content can be presented as a card is appealing.

Cards are surfaces that represent content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements such as text and pictures should be placed in such a way that they clearly refer to the hierarchy. In the best-known cases, the card is a teaser for a blog post.

1.1 Structure of the card

A standard card includes the enclosing parent element .card, within which children’s or content blocks can be displayed variably and differently. All blocks as a whole refer to a single subject or target. Depending on the level of the hierarchy, the content may receive different emphases.

1.2 Card layout elements

The structure of the layout elements of a Card is very simple. Let’s define the div boxes or content blocks with the class names described by the Material Design Style Guide for the Card elements.

The anatomy of Material Design

                               The anatomy of Material Design Card is composed of the card itself, optional header, a media block, the primary title,                                                                                                                           supporting text and action elements, such as buttons and clickable icons

Card layout elements:

- Card

 — Optional header

 — Media

 — Primary title

 — Supporting text

 — Actions

HTML:

<div class="card">
<div class="optional-header"></div>
<div class="media"></div>
<div class="primary-title"></div>
<div class="supporting-text"></div>
<div class="actions"></div>
</div>

The enclosing card container div.card is the only required element in a card. All other elements are optional. The size of the card is determined by the areas these elements occupy.

Each layout element contains additional elements that are very useful for the clear presentation of different emphases.

The construction of material design

                                The construction of material design includes child elements such as for example the thumbnail image (1), header text (2),                                                                                                                                     subheading (3), media (4), Supporting text (5), buttons (6), icons (7).

  1. Thumbnail [optional]
    Cards can contain thumbnails to display an avatar, logo, or icon.

  2. Header text [optional]
    Header text can include things like the name of a photo album or article.

  3. Subhead [optional]
    Subhead or Secondary Text may contain textual elements such as an article subheading or a marked location.

  4. Media [optional]
    Cards can contain a variety of media, including photos and graphics, e.g. Weather icons.

  5. Supporting text[optional]
    Supporting text includes text such as an article summary or a restaurant description.

  6. Buttons [optional]
    Cards can contain buttons for actions.

  7. Icons [optional]
    Cards can contain icons for actions.

The arrangement of related elements can be easily determined.

To become more concrete, I’ll show you the standard layout of a card. Starting with the element div.card.



2. Card elements


2.1 Card

HTML:

<div class="card">…</div>

And here comes the CSS for the card element.

CSS:

.card {
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
color: rgba(0,0,0,.87);
margin: 8px;
min-width: 290px;
overflow: hidden;
position: relative;
}
.card::after {
clear: both;
}
.card::after, .card::before {
content: "";
display: block;
}

That’s it — in principle, all mandatory elements for the card are hereby implemented.

The following are the optional elements. It’s the elements that make the card meaningful. Let’s now define the optional header together.


2.2 Optional Header

   The layout elements f

                                          The layout elements for the optional header includes the thumbnail (1) and the primary title with the title/primary text (2),                                                                                                                                                                      and the subhead/secondary text (3).

HTML:

<div class="card">
 <div class="optional-header">...</div>
</div>


CSS:

.optional-header {
min-height: 40px;
padding: 16px;
position: relative;
}


2.2.1 Thumbnail (1)

The thumbnail -div contains an img-element depending on the conversion logic. If the thumbnail image has a clear reference to the content of the card and thus represents a possibly desired factor for search engine optimization, the image should be loaded via the HTML element img.

HTML:

<div class="card">
 <div class="optional-header">
  <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
 </div>
</div>

CSS:

.thumbnail {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
float: left;
height: 40px;
position: relative;
width: 40px;
}
.thumbnail img {
background-color: #fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 50%;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.thumbnail--24x24 img {
height: 24px;
width: 24px;
}
.thumbnail--28x28 {
margin-right: 4px;
}
.thumbnail--28x28 img {
height: 28px;
width: 28px;
}
.thumbnail--32x32 {
margin-right: 8px;
}
.thumbnail--32x32 img {
height: 32px;
width: 32px;
}
.thumbnail--36x36 {
margin-right: 12px;
}
.thumbnail--36x36 img {
height: 36px;
width: 36px;
}
.thumbnail--40x40 {
margin-right: 16px;
}
.thumbnail--40x40 img {
height: 40px;
width: 40px;
}


2.2.2 Primary Title:

Title/Primary text (2), and the Subhead/Secondary text (3)

  • The element for the primary title is div.primary-title

  • The element for the title is div.title

  • The element for the subtitle div.subhead

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
</div>


CSS:

.optional-header {
min-height: 40px;
padding: 16px;
position: relative;
}
.optional-header .action-icons {
float: right;
position: relative;
right: -8px;
top: 2px;


}
.optional-header .primary-title {
bottom: auto;
display: inline-block;
padding: 0;
position: absolute;
top: 50%;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.optional-header + .primary-text {
margin-top: calc(24px/2/2);
}
.optional-header + .supporting-text {
padding-top: 0;
}
.primary-title .optional-header {
padding-left: 0;
padding-right: 0;
}
.subhead, .secondary-text {
color: rgba(0,0,0,.54);
font-size: 14px;
}


.title {
font-size: 14px;
font-weight: 500;
}
.title + .subhead {
margin-top: 7px;
}
.title {
line-height: 1.2;
}


2.3 Media

   The media element

                                                           The media element (1) div.media contains an img element over which the image is to be loaded.

HTML:

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
 <div class="media"><img src="https://path/to/the/picture.png"></div>
</div>

The media block div.media can be represented by different aspect ratios. The Style Guide recommends 16: 9, 3: 2, 4: 3, 1: 1, 3: 4, 2: 3 formats.

In our example, the image should be displayed in 16: 9 format. For this, I add the class media--16-9 to the media element:

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
 <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>
</div>


CSS:

.media {
position: relative;
}
.media .action-icon {
color: #fff;
text-shadow: 0 2px 2px rgba(0,0,0,0.54);
}
.media .actions {
background-image: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0));
color: #fff;
position: absolute;
width: 100%;
}
.media .optional-header {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
display: block;
float: left;
width: 100%;
z-index: 100;
}
.media .optional-header .primary-title {
background-image: none;
width: auto;
}
.media .primary-title {
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.46));
bottom: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 16px 16px 24px;
position: absolute;
width: 100%;
z-index: 1;
}
[class*='media--'] {
height: 0;
overflow: hidden;
}
.media--1-1 {
padding-bottom: 100%;
}
.media--16-9 {
padding-bottom: 56.25%;
}
.media--16-9 > img, .media--3-2 > img, .media--4-3 > img {
height: auto;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.media--16-9 img, .media--3-2 img, .media--4-3 img, .media--80x80 img, .media--1-1 img, .media--3-4 img, .media--2-3 img {
position: absolute;
}
.media--2-3 {
padding-bottom: 150%;
}
.media--3-2 {
padding-bottom: 66.66%;
}
.media--3-4 {
padding-bottom: 133.33%;
}
.media--4-3 {
padding-bottom: 75%;
}
.media--80x80 {
margin: 16px;
padding-bottom: 80px;
width: 80px;
}
.media--80x80 > img, .media--1-1 > img, .media--3-4 > img, .media--2-3 > img {
height: 100%;
left: 50%;
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: auto;
}



2.4 Supporting Text

 The div.supporting-text element

                           The div.supporting-text element (1) should display supporting content, such as an article summary, hotel or restaurant description.

HTML:

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
 <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>
 <div class="supporting-text">Supporting text.</div>
</div>

CSS:

.primary-title + .supporting-text, .optional-header + .supporting-text {
padding-top: 0;
}


.supporting-text {
font-size: 14px;
line-height: 1.5;
padding: 16px;
}



2.5 Actions

 The action block div.actions

                                              The action block div.actions serves as a concrete call to action through action buttons (1) or action icons (2).

HTML:

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
 <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>
 <div class="supporting-text">Supporting text.</div>
 <div class="actions">...</div>
</div>


2.5.1 Action Buttons

Action buttons (1) can be included within the action block.

HTML:

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
 <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>
 <div class="supporting-text">Supporting text.</div>
 <div class="actions">
   <div class="action-buttons">
     <button class="button" type="button">Action 1</button>
     <button class="button" type="button">Action 2</button>
   </div>
 </div>
</div>


2.5.2 Action Icon

Action Icons (2) are also used here.

HTML:

<div class="card">
 <div class="optional-header">
   <div class="thumbnail"><img src="https://path/to/the/picture.png"></div>
   <div class="primary-title">
     <div class="title">Title</div>
     <div class="subhead">Subhead</div>
   </div>
 </div>
 <div class="media media-16–9"><img src="https://path/to/the/picture.png"></div>
 <div class="supporting-text">Supporting text.</div>
 <div class="actions">
   <div class="action-buttons">
     <button class="button" type="button">Action 1</button>
     <button class="button" type="button">Action 2</button>
   </div>
   <div class="action-icons float-right"><i class="material-icons action-icon" role="button" title="Share">share</i><i class="material-icons action-icon" role="button" title="More options">more_vert</i></div>
 </div>
</div>

CSS:

.button {
background-color: transparent;
border: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: inherit;
cursor: pointer;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 36px;
min-width: 64px;
padding: 0 8px;
text-align: center;
text-transform: uppercase;
}
.button, .action-icon {
-webkit-transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), background-color .4s cubic-bezier(.25, .8, .25, 1);
}
.button--raised {
-moz-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-o-transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
-webkit-transition: 0 .28s cubic-bezier(.4, 0, .2, 1);
transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1), 0 .28s cubic-bezier(.4, 0, .2, 1);
}
.button--raised:focus, .button--raised:hover {
-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
.button--purple {
background-color: #6200EE;
color: #fff;
}
.button:hover, .action-icon:hover {
background-color: rgba(158,158,158,0.2);
}
.button:active, .action-icon:active {
background-color: rgba(158,158,158,0.4);
}
.button:focus:not(:active), .action-icon:focus:not(:active) {
background-color: rgba(0,0,0,.12);
}
.button[disabled] {
color: rgba(0,0,0,.26);
cursor: default;
}
.button[disabled]:hover {
background: none;
}
.action-buttons, .action-icons {
display: inline-block;
vertical-align: middle;
}
.action-icon {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
margin: 0 2px;
outline: none;
padding: 6px;
}
.action-icons {
color: rgba(0,0,0,0.54);
}
.actions {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 52px;
padding: 8px;
position: relative;
z-index: 1;
}

The HTML is manageable and readable. The CSS for these examples is even quite simple with 400 lines  including  note dependencies, browser and system compatibility and flexibility of the elements. 



3. Card examples

Finally, I’ll show you three different examples of the use of cards. It helps you to understand how flexible cards can be represented in the presentation context.

3.1 Post

Post

The above image shows a Material Design Card to:

  • Display feed content with a small teaser image (1) 

  • Display feed content with big teaser image along with comment filed (2)

3.1.1 Feed (1)

If you are an Android user, you might be aware of this card representation (shown in the left). It’s great for feed content or news main pages. The advantage is that on a small card surface, the most important content is clearly tapped. Check the below code to create a material design card for feed content with a small teaser image. 

HTML:

<div class="card">
     <div class="media media--80x80 float-right"> <img src="https://cdn.pixabay.com/photo/2016/02/13/12/27/aurora-1197755_1280.jpg" alt="" width="640" height="426"> </div>
     <div class="primary-title">
       <div class="primary-text">Hundreds of New Planets Found</div>
       <div class="secondary-text">Astronomy</div>
     </div>
     <div class="supporting-text"> Supporting text include text like an article summary or a restaurant description.</div>
     <div class="actions">
       <div class="action-buttons">
         <button class="button" type="button">Read More</button>
       </div>
       <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
     </div>
   </div>


3.1.2 Post with comment field (2)

This card (shown in the right) can demonstrate the detail view of the previous feed card. We recognize similarities to the multi-column card representation that we know from Google Plus. Of course, it can also be used for desktop applications, even outside of a multi-column layout. Check the below code to create a material design card for feed content with big teaser image along with comment field. 

HTML:

<div class="card">
     <div class="media media--16-9">
       <div class="actions">
         <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Bookmark">bookmark_border</i> <i class="material-icons action-icon" role="button" title="Share">share</i> </div>
       </div>
       <div class="primary-title">
         <div class="secondary-text">Astronomy</div>
         <div class="primary-text">Hundreds of New Planets Found</div>
       </div>
       <img src="https://cdn.pixabay.com/photo/2016/02/13/12/27/aurora-1197755_1280.jpg" alt="" width="640" height="426"> </div>
     <div class="optional-header">
       <div class="thumbnail thumbnail--40x40"><img src="https://randomuser.me/api/portraits/men/99.jpg" alt="" width="40" height="40"></div>
       <div class="primary-title">
         <div class="title">Dan West</div>
         <div class="subhead">Scientist</div>
       </div>
       <div class="action-icons"> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
     </div>
     <div class="supporting-text"> Supporting text include text like an article summary or a restaurant description. Lorem ipsum dolor sit amet, vel ea quis suscipit. Modus scriptorem at sit, vix malorum appellantur eu an nec assum mazim pericula.</div>
     <div class="optional-header">
       <div class="thumbnail thumbnail--24x24"><img src="https://lh3.googleusercontent.com/-GvhDyQYoDZw/AAAAAAAAAAI/AAAAAAAAAAA/AIcfdXCR7Z9juYjHkI2MjHvfGmtowYerFw/s64-c-mo/photo.jpg" alt="" width="24" height="24"></div>
       <div class="primary-title">
         <textarea class="subhead" placeholder="Kommentar hinzufügen…" aria-label="Kommentar hinzufügen…" role="textbox"></textarea>
       </div>
     </div>
     <div class="actions">
       <div class="action-icons"> <i class="material-icons action-icon" role="button" title="Share">camera_alt</i> <i class="material-icons action-icon" role="button" title="More options">link</i> </div>
       <div class="action-buttons float-right">
         <button class="button" type="button">Cancel</button>
         <button class="button" type="button" disabled="">Post</button>
       </div>
     </div>
   </div>


3.2 Report

 Report

The above image represents:

  • Left: Displaying travel report with small teaser Image (1). 

  • Right: Displaying travel report with big teaser Image (2).

This example shows a card with little text. The idea is that the image and the title alone have such a strong meaningfulness that makes the reader curious to know more. Especially the second example of this variant can serve as an entry for travel blogs.

In particular, the oversized 2: 3 aspect ratio in relation to the title and category name let the reader quickly guess what the content is about. This variant is suitable for topics that have a great effect on the mood of the user through visual imagery and also shows a certain importance. 

Examples of website formats include travel/culture reports, journalistic contributions to foreign affairs events. But also the culinary recipes can be presented attractively.

3.2.1 Report with small teaser image (1)

Check the below code to create a material design card for travel report with a small teaser image.

HTML:

<div class="card">
     <div class="media media--16-9">
       <div class="primary-title">
         <div class="primary-text">The Many Lives Along the Yangtze River</div>
         <div class="secondary-text">Travel</div>
       </div>
       <img src="https://cdn.pixabay.com/photo/2016/11/03/04/03/ace-1793425_1280.jpg" alt="" width="640" height="426"> </div>
     <div class="actions">
       <div class="action-buttons">
         <button class="button" type="button">Read report</button>
       </div>
       <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
     </div>
   </div>


3.2.2 Report with big teaser Image (2)

Check the below code to create a material design card for travel report with big teaser image.

HTML:

<div class="card">
     <div class="media media--2-3">
       <div class="primary-title">
         <div class="optional-header">
           <div class="thumbnail thumbnail--40x40"><img src="https://randomuser.me/api/portraits/women/47.jpg" alt="" width="40" height="40"></div>
           <div class="primary-title">
             <div class="title">Emma Freeman</div>
             <div class="subhead">Travel Journalist</div>
           </div>
         </div>
         <div class="primary-text">The Many Lives Along the Yangtze River</div>
         <div class="secondary-text">Travel</div>
       </div>
       <img src="https://cdn.pixabay.com/photo/2016/11/03/04/03/ace-1793425_1280.jpg" alt="" width="960" height="640"> </div>
     <div class="actions">
       <div class="action-buttons">
         <button class="button" type="button">Read report</button>
       </div>
       <div class="action-icons float-right"> <i class="material-icons action-icon" role="button" title="Share">share</i> <i class="material-icons action-icon" role="button" title="More options">more_vert</i> </div>
     </div>
   </div>


3.3 Travel and Events

Travel and Events

The above image represents:

  • Left: Design a card to display hotel booking (1)

  • Right: Design a small card to display hotel booking (2).

During an earlier project, I developed the design for a marketplace for travel and accommodation bookings. For the home page, I opted for a very similar card design to display the top offers demanding. In a 3-, a maximum of 4 column layout, this card type comes great into its own.


3.3.1 Book a hotel (1)

Check the below code to create a material design card for hotel booking with a big teaser image.

HTML:

<div class="card card__dark card__dark--magenta">
     <div class="media media--16-9"> <img src="https://cdn.pixabay.com/photo/2018/01/12/11/55/london-3078109_960_720.jpg" alt="" width="640" height="426"> </div>
     <div class="primary-title">
       <div class="primary-text float-right">$99</div>
       <div class="primary-text">Apple Apartments Limehouse</div>
       <div class="secondary-text">
         <div class="action-icons icon-color--yellow"> <i class="material-icons action-icon" role="button" title="Share">star</i> <i class="material-icons action-icon" role="button" title="More options">star</i> <i class="material-icons action-icon" role="button" title="More options">star</i></div>
         -Hotel</div>
     </div>
     <div class="supporting-text">London, 2.8 km to Tower Bridge</div>
     <div class="actions border-top">
       <div class="action-buttons float-right">
         <button class="button" type="button">View Details</button>
       </div>
       <div class="action-icons"> <i class="material-icons action-icon" role="button" title="Share">wifi</i> <i class="material-icons action-icon" role="button" title="More options">spa</i> <i class="material-icons action-icon" role="button" title="More options">pool</i></div>
     </div>
   </div>


3.3.2 Book a hotel — small (2)

The small variant is suitable for complete ordering process, such as for webshops with dashboard features, allowing the user to see through their system interactions, or for order confirmation email, so that your booking can be summarized in a very condensed way.

Check the below code to create a material design card for hotel booking with a small teaser image.

HTML:

<div class="card card__small card__dark card__dark--magenta">
     <div class="media"> <img src="https://cdn.pixabay.com/photo/2018/01/12/11/55/london-3078109_960_720.jpg" alt="" width="640" height="426"> </div>
     <div class="primary-title">
       <div class="primary-text">Apple Apartments Limehouse</div>
       <div class="secondary-text">June 21 - 28</div>
     </div>
     <div class="actions border-top">
       <div class="action-buttons">
         <button class="button" type="button">View Details</button>
       </div>
     </div>
   </div>


Closing words

For the implementation of Material Design for Web applications, there are a variety of CSS frameworks such as Material Design Lite, Materialize, and many more. You can find a list of popular frameworks here.

Building various front-end frameworks is really significant. Teams can achieve business and customer goals more quickly through the implementation of these frameworks, that was not previously possible. The quality assurance is provided by the framework as well. Good documentation makes the HTML easy to integrate and CSS adjustments are rarely necessary. Ideally, you no longer need any CSS knowledge, only the willingness to work with the documentation is required.

On the other hand, I also see a drastic change of direction — everything is made available through HTML, CSS and JavaScript modules. The modern front-end designer and developer has thus become the administrator and editor of the code, rather than thinking creatively about solutions.

If I compare the solutions of these frameworks, I notice that cards are often displayed differently: distances, font sizes, shading, etc. All of them deviate from the material design guidelines. In my observations, there are striking differences between how the design guidelines are interpreted. In doing so, I see that although child elements can be represented in a correct distance to the mother element, the inner child element also shows certain characteristics and influences distances to the element. Although technically thought and implemented correctly, the visual effect is not clear.

Example: The title itself has a certain distance to its element, which is often ignored in calculations. As a result, the optical distance is not maintained correctly. The pixel-accurate implementation is therefore incorrect. I think about how to make code scalable and flexible in order to achieve an optimal result in a way that comes so close to the idea of material design on a visual level in terms of perfection that it matches the creator thought. And I succeed through critical questioning and trying out. You will find that you are encountering obstacles. And that’s what makes a valuable CSS developer — by identifying and overcoming obstacles, then producing consistent and clean code.

All card examples including HTML and CSS  code in this guide are manageable, very flexible and versatile.

https://codepen.io/JonathanTorke/pen/WyzPGX

Happy coding!!

Jonathan

Jonathan Torke

Blog Author

Jonathan Torke is a UX consultant and designer from Germany. He shares fresh resources for web designers and developers every day on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

link 188bet

13 November 2018 at 10:39am
Hello! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a wonderful job! http://skrun.ch/cKzv2ij

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount