Material Design Square Card Components

Developer
Srijon Sarker
Size
2,243 Kb
Views
8,096
  1. Material Design Square Card Components Previews
  2. Material Design Square Card Components HTML Codes
  3. Material Design Square Card Components CSS Codes

How do I make an material design square card components?

What is a material design square card components? How do you make a material design square card components? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

Material Design Square Card Components Previews
IQ Test

Material Design Square Card Components - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Square Card Components</title> <link rel='stylesheet prefetch' href='https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Lato:400,100,300,700,900|Roboto+Condensed:400,300,700|Montserrat:400,700|Open+Sans+Condensed:300,700|Hind:400,300,500,600,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Square card --> <div class="demo-card-square mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">Update</h2> </div> <div class="mdl-card__supporting-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis. </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> View Updates </a> </div> </div> <script src='https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js'></script>
</body>
</html>

Material Design Square Card Components - Script Codes CSS Codes

.demo-card-square.mdl-card { width: 320px; height: 320px;
}
.demo-card-square > .mdl-card__title { color: #fff; background: url('https://getmdl.io/assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
}
body { padding: 20px; background: #fafafa; position: relative;
}
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v11/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -moz-font-feature-settings: 'liga'; -moz-osx-font-smoothing: grayscale;
}
Material Design Square Card Components - Script Codes
Material Design Square Card Components - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 2,243 Kb
Views 8,096
Do you need developer help for Material Design Square Card Components?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Visual Card
Wide Card With Share Menu Button
Material Calendar Concept
Material Profile UI Hover
Flat Pricing Table
My Profile Card
CSS Slider
Springy popup card
Facebook like button Emoji Reaction
Statics UI
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!