Materialize CSS Cards Last Updated : 16 May, 2022 Comments Improve Suggest changes Like Article Like Report Cards are a convenient means of displaying different types of relevant content. Materialize uses cards for presenting similar objects whose sizes and actions can be changed with the requirement. Here is an example of a basic card. html <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h3>Basic card</h3> <div class="card green lighten-1"> <div class="card-content black-text"> <span class="card-title"></span> <p>This is a very simple card. It is good at containing small information. This is convenient because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="white-text">Link</a> <a href="#" class="white-text">Link</a> </div> </div> </body> </html> Materialize provides different types of card according to its requirement, following are the names : Image Card: It is used for a standard card with the help of image thumbnail. For this card-image class is added inside the card class.FABs in Cards: Within the image card, floating action buttons can be added with different sizes.Horizontal Cards: In this, space is divided into two blocks where one side is used for image and the other for information.Cards Reveal: This is used for adding extra information which can be accessed by a click. For this to work, card-reveal div is added with span card-title class and to open card reveal, activator class is added to an element inside the card.Tabs in Cards: This is used to add different tabs in the card. To add this, cards-tabs class is added in between the header and tab content.Card Panel: This is used for a simple card that requires minimum markup with padding and shadow effect. Here is an example shown that uses all the above cards: Example: html <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> <script type="text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="container"> <h3>Basic card</h3> <div class="card green lighten-1"> <div class="card-content black-text"> <span class="card-title"> </span> <p>This is a very simple card. It is good at containing small information. This is convenient because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="white-text">Link</a> <a href="#" class="white-text">Link</a> </div> </div> <div class="divider black"></div> <h3>Image card with link</h3> <div class="card"> <div class="card-image"> <img src="geeksforgeeks-6.png" alt="" /> <span class="card-title"> </span> </div> <div class="card-content"> <p>This is a very simple card. It is good at containing small information.This is because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="green-text">Link</a> </div> </div> <div class="divider black"></div> <div class="row"> <h2>FABs in Cards</h2> <div class="col s12 m6"> <div class="card"> <div class="card-image"> <img src="download.png" /> <span class="card-title"> Card Title </span> <a class= "btn-floating halfway-fab waves-effect waves-light red"> <i class="material-icons"> add</i></a> </div> <div class="card-content"> <p>This is a very simple card. It is good at containing small information. This is because It require little markup to use effectively. </p> </div> </div> </div> <div class="col s12 m6"> <div class="card"> <div class="card-image"> <img src="download.png" /> <span class="card-title"> Card Title</span> <a class= "btn-floating btn-large halfway-fab waves-effect waves-light red"> <i class="material-icons">add</i> </a> </div> <div class="card-content"> <p>This is a very simple card. It is good at containing small information. This is because It require little markup to use effectively.</p> </div> </div> </div> </div> <div class="divider black"></div> <div class="col s12 m7"> <h2 class="header"> Horizontal Card</h2> <div class="card horizontal"> <div class="card-image"> <img src="" /> </div> <div class="card-stacked"> <div class="card-content"> <p>This is a very simple card. It is good at containing small information.</p> </div> <div class="card-action"> <a href="#" class="green-text">Link</a> </div> </div> </div> </div> <div class="divider black"></div> <h2>Card Reveal</h2> <div class="card"> <div class= "card-image waves-effect waves-block waves-light"> <img class="activator" src="office.jpg" /> </div> <div class="card-content"> <span class= "card-title activator grey-text text-darken-4"> Card Title <i class="material-icons right"> more_vert</i></span> <p><a href="#" class="green-text"> Link</a></p> </div> <div class="card-reveal"> <span class= "card-title grey-text text-darken-4"> Card Title <i class="material-icons right"> close </i></span> <h5>Here is some more information that will be only revealed once clicked on. </h5> </div> </div> <div class="divider black"></div> <h2>Tabs in Cards</h2> <div class="card"> <div class="card-content"> <p>This is a very simple card. It is good at containing small information. This is because It require little markup to use effectively.</p> </div> <div class="card-tabs"> <ul class="tabs tabs-fixed-width"> <li class="tab"> <a class="active green-text" href="#test4">Test 1</a> </li> <li class="tab"> <a href="#test5" class="green-text">Test 2</a> </li> <li class="tab"> <a href="#test6" class="green-text">Test 3</a> </li> </ul> </div> <div class="card-content grey lighten-4"> <div id="test4"><h5>Test 1</h5></div> <div id="test5"><h5>Test 2</h5></div> <div id="test6"><h5>Test 3</h5></div> </div> </div> <div class="divider black"></div> <div class="divider black"></div> <br /> <br /> <br /> <br /> </div> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html> Output: Card Sizes We can also make uniformly sized cards using the materialize CSS classes. i. small - The "small class" is used to make cards of height up to 300px. Syntax: <div class="card small"> <!-- Card Content --> </div> ii. medium - The "medium class" is used to make cards of height up to 400px. Syntax: <div class="card medium"> <!-- Card Content --> </div> iii. large - "The large class" is used to make cards of height up to 500px. Syntax: <div class="card large"> <!-- Card Content --> </div> NOTE: We can also define custom heights to the cards using CSS.If we don't mention any card size or class , then the card gets the height and width default to auto , i.e , the height and width increases with the increase in the content.Here is a code example showing different cards of different sizes: HTML <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="container"> <h3>Card with Class Small </h3> <div class="card purple darken-3 small"> <div class="card-content"> <span class="card-title"> </span> <p class="white-text">This is a very simple card. It is good at containing small information. This is convenient because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="white-text">Link</a> <a href="#" class="white-text">Link</a> </div> </div> </div> <div class="container"> <h3>Card with Class Medium</h3> <div class="card purple darken-3 medium"> <div class="card-content"> <span class="card-title"> </span> <p class="white-text">This is a very simple card. It is good at containing small information. This is convenient because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="white-text">Link</a> <a href="#" class="white-text">Link</a> </div> </div> </div> <div class="container"> <h3>Card with Class Large</h3> <div class="card purple darken-3 large"> <div class="card-content"> <span class="card-title"> </span> <p class="white-text">This is a very simple card. It is good at containing small information. This is convenient because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="white-text">Link</a> <a href="#" class="white-text">Link</a> </div> </div> </div> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html> Output:Colored Card We can also make cards of different colors and also add different text colors to the card using different colors from the Materialize CSS color palette. Syntax:<div class="card purple darken-3"> <!-- Card Content --> </div>Full Code example : HTML <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="container"> <h3>Basic card</h3> <div class="card purple darken-3"> <div class="card-content"> <span class="card-title"> </span> <p class="white-text">This is a very simple card. It is good at containing small information. This is convenient because It require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#" class="white-text">Link</a> <a href="#" class="white-text">Link</a> </div> </div> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> </body> </html> Output:Supported Browsers:Google ChromeBrave BrowsersMozilla FirefoxOperaSafariMicrosoft Edge Comment More infoAdvertise with us Next Article Materialize CSS Collections T tanvi_gupta Follow Improve Article Tags : Web Technologies CSS Materialize Materialize-CSS Similar Reads Materialize CSS Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform. 2 min read Materialize CSS Introduction and Installation Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. Materialize CSSMaterialize CSS is a modern front-end framework that enables developers to create visually appealing and responsive web applications with ease. Inspired 2 min read Materialize as CSSMaterialize CSS ColorsIt is created with HTML, CSS, and JavaScript, and designed by Google. Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Color: Here is a color palette based on the material design base colors. Each of these colors is 2 min read Materialize CSS GridsThere are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are 3 min read Materialize CSS HelpersThere are several helpers in materialize CSS that are used for designing needs such as: AlignmentHiding/Showing contentFormatting 1. Alignment: Content can be aligned horizontally or vertically by using the following classes: Vertical Align: It can be easily done by adding the class valign-wrapper t 3 min read Materialize CSS MediaVarious classes are provided by materialize CSS to make media responsive. Images: Images can be styled in following ways: Responsive Images: To make images responsive to page width, responsive-img class is added with image tag. <img class="responsive-img" src="image.jpg"> Circular Images: To m 2 min read Materialize CSS Pulse and ShadowPulse: Used for get attention towards buttons with this subtle but captivating effect. Just required to add pulse class to buttons. Note: This is used only for floating button since it will not work with other components. <a class="btn-floating pulse"><i class="material-icons">battery_al 2 min read Materialize CSS | TablesTables are nice and easy way to organize a lot of data. Materialize CSS provides a few utility classes to style table. In addition to improve mobile experience, all tables on mobile-screen widths are centered automatically. Following are the styles for table: Stripped Table: html <!DOCTYPE html 3 min read Materialize CSS TypographyMaterialize CSS provides several elements that can be used for the typography of the page: HeadersBlockquotesFlow Text Headers: Materialize CSS provides basic styling to be used on the header tags. The tags below show the available header tags that are styled by Materialize CSS: <h1>Heading 1 2 min read Materialize ComponentsMaterialize CSS BadgesMaterialize badge is a component that is used to notify, if there are new or unread messages or notifications display. Adding a new class to a badge component gives it a background. There are different ways of using badge component: Badges in Collections: <div class="collection"> <a href="# 4 min read Materialize CSS ButtonsThe button component along with the links inside them are probably one of the most significant features allowing the users to interact with the web pages and perform various functions and move from one web page to other. Following are the various classes of buttons defined along with their effect: R 3 min read Materialize CSS BreadcrumbsBreadcrumbs in materialize CSS is used when you have multiple layers of content to display your current location. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. It uses two classes i.e. nav-wrapper and breadcrumb. nav-wrapper is used to set the nav component 1 min read Materialize CSS CardsCards are a convenient means of displaying different types of relevant content. Materialize uses cards for presenting similar objects whose sizes and actions can be changed with the requirement. Here is an example of a basic card. html <!DOCTYPE html> <html> <head> <title>Pag 7 min read Materialize CSS CollectionsCollections allow you to group list-objects together. It represents various types of collection i.e., a group of related information . Following are the various collection class that are used for creating various types of collection: Basic: In this the div or ul container as a collection and the a o 4 min read Materialize CSS FooterFooter is an effective way to organize a lot of site navigation and information at the end of a page. This is the place where a user will look once they have finished scrolling through the current page or are looking for additional information about the website. Flexbox is used to structure the html 3 min read Materialize CSS IconsMaterialize CSS provides a rich set of material icons of google which can be downloaded from Material Design specs. Icon libraries that are supported by materialize css are Google Material Icons, Font Awesome Icons and Bootstrap Icons. Different icons can be selected from Material Icons. Library and 2 min read Materialize CSS NavbarsA navigation bar is a user interface element within a webpage that contains links to other sections of the website. It is displayed as a list of horizontal links at the top of each page. It is placed before the main content of the page or below the header. The navbar is contained in an HTML5 <nav 7 min read Materialize CSS PaginationPagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages. The pagination class is used to set the <ul> list element as a pagination component. The page 2 min read Materialize CSS PreloaderPreloaders are used for providing symbolic messages that tells users about the website status like "Loading" or "Not crashed". Materialize provides CSS classes to give various types of preloaders. The following are the available classes provided by Materialize CSS.Linear: It identifies an element as 5 min read Materialize with JSCarousel using Materialize CSSMaterialize CSS is a UI component library that is created and designed by Google. It is a design language that combines the classic principles of successful design along with innovation and technology.Features:Responsive front-end CSS framework.It is browser-independent.Extensible.It is free to use. 3 min read Materialize CSS CollapsibleCollapsibles are accordion elements that allow you to expand or collapse the content when tapped and are useful to provide a compact presentation of the content. It allow to hide the content that is not immediately relevant to the user. Here is the syntax of a simple collapsible: <ul class="colla 3 min read Materialize CSS DropdownMaterialize CSS provides a dropdown facility that allows the user to choose one value from a set of given values in a list. To add a dropdown list to any button, it has to be made sure that the data-target attribute matches with the id in the <ul> tag. The main class and attribute used in a d 2 min read Materialize CSS ModalsMaterialize CSS uses modal component for creating dialog boxes, confirmation messages or presenting important content to the viewers where underlying content becomes inactive until the modal window is closed. In order for the modal to work, add the modal Id to the link of the trigger and include the 4 min read Materialize CSS TooltipsTooltips are small, textual but interactive hints that are used mainly for the graphical purpose. It helps the icons or buttons to give clarification of its function. To use this, tooltipped class is added along with its position such as: top, bottom, left or right. Syntax is as follow: <a class= 2 min read Materialize CSS WavesMaterialize includes an external library wave to create ink effect outlined in Material Design. Waves can be applied to any element, to use this effect on buttons, wave-effect class is added to the button. There are several ways by which waves can be classified. It can be done either by pre-created 2 min read Materialize FormsMaterialize CSS CheckboxMaterialize provides a checkbox feature for creating styled checkboxes for the websites. The standard HTML checkboxes are plain with a simple black border in unchecked and a tick mark in checked states, but with materialize border style can be changed along with the tick mark. For creating a checkbo 2 min read Materialize CSS SelectMaterialize provides a select feature to create options that can be easily selected to provide more information for the web forms. The following are different select feature: simple select-option: allows to select an option from select dropdown. For this, <select> and <option> tags are u 3 min read Materialize CSS SwitchesMaterialize provides switches to allow the viewer to select an option between the two available. Generally, switches are special checkboxes used for binary states such as on/off or yes/no or agree/disagree. Switches can be created by using the “switch†class inside the wrapper div with the input typ 2 min read How to we create Pagination in Materialize CSS ? Materialize CSS is a front-end UI library that is created by Google using the combination of HTML, CSS, and JavaScript. It is basically a design language that combines classic design along with modern innovations and technology. The purpose of Google behind developing Materialize CSS is to provide a 3 min read What are the different utility classes in Materialize CSS ? In this article, we will learn about the utility classes in Materialize CSS, along with understanding available classes and their implementation. The utility class is generally used to make designing easier along with organizing the content in the proper structure, which contains aligning the conten 7 min read What are the classes to create responsive image & video in Materialize ? In this article, we will see how to add responsive images and video to HTML files using Materialize CSS & will also see their implementation through the examples.Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Mater 2 min read Like