Open In App

Onsen UI CSS Component Basic Card

Improve
Improve
Like Article
Like
Save
Share
Report

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 article, we are going to implement the Onsen UI CSS Component Basic 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 basic card is a simple card in Onsen UI that has rounded borders.

 Onsen UI CSS Component Basic 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.

Syntax: Create a basic card as follows:

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

Example 1: In this example, we have a card displaying some data.

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=
    <link rel="stylesheet" href=
    </script>
    </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 Basic Card
        </strong>
    </center>
  
    <div class="card">
        <div class="card__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 this example, we will show and hide the basic card using 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=
    <link rel="stylesheet" href=
    </script>
    </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 Basic Card
        </strong>
        <br /><br />
  
        <button class="button" onclick="showCard()">
            Show Card
        </button>
    </center>
  
    <div class="card">
        <div class="card__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>


Output:

 

Reference: https://onsen.io/v2/api/css.html#card-category



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads