Material Simple Cards in jQuery

This code snippet helps you to create a simple card. It uses a Google’s Material Design Lite (MDL) framework. There are two <div> elements inside the grid, each with class “mdl-card” and other classes to specify that they are card components with shadows. These cards contain an image, a title, supporting text, and buttons to read more, add to favorites, and share the content. The buttons have classes and attributes to enable Material Design effects and icons.

How to Create Material Simple Cards in jQuery

First of all, load the following assets into the head tag of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='//fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css'>

Create the HTML structure for the simple card as follows:

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
	<main class="mdl-layout__content">
		<div class="mdl-grid">
			<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
				<figure class="mdl-card__media">
					<img src="https://tfirdaus.github.io/mdl/images/laptop.jpg" alt="" />
				</figure>
				<div class="mdl-card__title">
					<h1 class="mdl-card__title-text">Learning Web Design</h1>
				</div>
				<div class="mdl-card__supporting-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
				</div>
								<div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
    <div class="mdl-layout-spacer"></div>
    	<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
					<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
	  </div>
			</div>
			
			
			
			<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
				<figure class="mdl-card__media">
					<img src="https://tfirdaus.github.io/mdl/images/html5.jpg" alt="" />
				</figure>
				<div class="mdl-card__title">
					<h1 class="mdl-card__title-text">Learning HTML</h1>
				</div>
				<div class="mdl-card__supporting-text">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
				</div>
				<div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Read More</a>
    <div class="mdl-layout-spacer"></div>
    	<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
					<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
	  </div>
			</div>
		</div>
	</main>
</div>

Now, style the simple card using the following CSS styles:

.mdl-grid {
	max-width: 600px;
}
.mdl-card__media {
	margin: 0;
}
.mdl-card__media > img {
	max-width: 100%;
}
.mdl-card__actions {
	display: flex;
	box-sizing:border-box;
	align-items: center;
}
.mdl-card__actions > .mdl-button--icon {
	margin-right: 3px;
	margin-left: 3px;
}

Load the following scripts before closing the body tag:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js'></script>

That’s all! hopefully, you have successfully created Material Simple Cards in jQuery. If you have any questions or suggestions, feel free to comment below.