Onsen UI CSS Component Material Card

Last Updated : 04 Jul, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

In this tutorial, we are going to implement the Onsen UI CSS Component Material Card component. A card is an HTML component used to show data that are alike. Cards help to structure the data and display them in a structured format. A material card is a material UI card that has sharper corners.

Onsen UI CSS Component Material Card classes:

card: The container with this class is used to create card components.
card__content: The container with this class holds the content of the card.
card–material: This denotes the card container as material type.
card–material__content: The content container is of material type.

Syntax: Create a material card as follows:

<div class="card card--material">
    <div class="card__content card--material">
        Welcome to GeeksforGeeks. A computer 
        science portal for geeks.
    </div>
</div>

Example 1: In the following example, we have a material card with some content.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src= 
    "https://unpkg.com/onsenui/js/onsenui.min.js"></script> 
    <script src= 
    "https://code.jquery.com/jquery-3.6.0.min.js"></script> 
  
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading">GeeksforGeeks</h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Card 
        </strong> 
    </center> 
  
    <div class="card card--material"> 
        <div class="card__content card--material__content"> 
            Welcome to GeeksforGeeks. 
            A computer science portal for geeks. 
            <p>List of tutorials</p> 
            <ul> 
                <li>Data Structures</li> 
                <li>Algorithms</li> 
                <li>Machine Learning</li> 
            </ul> 
        </div> 
    </div> 
</body> 
  
</html>

Output

Example 2: In the following example, we can open and close the material card with the help of buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
        "https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src= 
    "https://unpkg.com/onsenui/js/onsenui.min.js"></script> 
    <script src= 
    "https://code.jquery.com/jquery-3.6.0.min.js"></script> 
  
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading">GeeksforGeeks</h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Card 
        </strong> 
        <br /><br /> 
        <button class="button" onclick="showCard()"> 
            Show Card 
        </button> 
    </center> 
  
    <div class="card card--material"> 
        <div class="card__content card--material__content"> 
            Welcome to GeeksforGeeks. A  
            computer science portal for geeks. 
            <p>List of tutorials</p> 
            <ul> 
                <li>Data Structures</li> 
                <li>Algorithms</li> 
                <li>Machine Learning</li> 
            </ul> 
            <button class="button button--outline" 
                onclick="closeCard()"> 
                Close Card 
            </button> 
        </div> 
    </div> 
  
    <script> 
        function closeCard() { 
            $('.card').hide() 
        } 
        function showCard() { 
            $('.card').show() 
        } 
    </script> 
</body> 
  
</html>