Open In App

Onsen UI Card CSS Components

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 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 | Onsen 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 | Onsen 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



Last Updated : 10 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads