Skip to content
Related Articles
Open in App
Not now

Related Articles

Onsen UI Card CSS Components

Improve Article
Save Article
  • Last Updated : 17 Jun, 2022
Improve Article
Save Article

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 Card CSS Components.

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. We have two different types of cards: basic and material.

Onsen UI Card CSS Components 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__title: This is used to create a basic card title.
  • card–material: This is used to create a material card.
  • card–material__content: The container with this class holds the material card content.
  • card–material__title: This is used to create a material card title. 

Note: The * marked classes are used in all Card.

Syntax:

<div class="card">
   <h2 class="card__title card--material__title">....</h2>
   <div class="card__content card--material__content">
      ....
   </div>
</div>

Example 1: The following example demonstrates the use of the card components classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <title>GeeksforGeeks | Onesen UI CSS</title>
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <strong>Onsen UI Card CSS Component</strong>
        <br/>
        <div style="height:400px; padding:2px 0 0 0;">
            <div class="card">
                <h2 class="card__title">
                    Title comes here
                </h2>
                <div class="card__content">
                    <b>
                        <p>The card content comes here..</p>
                    </b>
                        <p>
                            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.
                        </p>
                </div>
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: The following example demonstrates the use of the material card components classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <title>GeeksforGeeks | Onesen UI CSS</title>
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <strong>Onsen UI Material Card</strong>
        <br/>
        <div style="height:400px; padding: 2px 0 0 0;">
            <div class="card card--material">
                <div class="card__title card--material__title">
                    Material Card Title comes here... 
                </div>
                <div class="card__content card--material__content">
                    Onsen UI CSS Component Card with Title. 
                    A card component is used to show data that 
                    are alike. Cards help to structure the data and 
                    display them in a structured format. 
                    We have two different types of cards: 
                    basic and material and we can add titles 
                    to them. The title is used to display 
                    the card heading. 
                </div>
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!