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.
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:
- Materialize | Introduction and Installation
- Materialize CSS | Preloader
- Materialize CSS | Colors
- Materialize CSS | Grids
- Materialize CSS | Tables
- Materialize CSS | Helpers
- Materialize CSS | Badges
- Materialize CSS | Breadcrumbs
- Materialize CSS | Media
- Materialize CSS | Buttons
- Materialize CSS | Footer
- Materialize CSS | Typography
- Materialize CSS | Collections
- Materialize CSS | Pagination
- Materialize CSS | Icons
- Materialize CSS Navbars
- Materialize CSS - Modals
- Materialize CSS Dropdown
- Materialize | Collapsible
- Materialize CSS | Waves
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.