Onsen UI CSS Component Card with Title
Last Updated :
13 Jun, 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 article, we are going to implement the 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.
Onsen UI CSS Component Card with Title 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__title: This is used to create a material card title.
Syntax: Create a card with the title as follows:
<div class="card">
<h2 class="card__title">GeeksforGeeks</h2>
<div class="card__content">
Welcome to GeeksforGeeks. A computer
science portal for geeks.
</div>
</div>
Example 1: In this example, we are creating a basic card with the title.
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 Card with Title
</strong>
</center>
<div class="card">
<h2 class="card__title">
GeeksforGeeks
</h2>
<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 are creating a material card with a title.
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 Card with Title
</strong>
</center>
<div class="card card--material">
<div class="card__title card--material__title">
GeeksforGeeks
</div>
<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:
Reference: https://onsen.io/v2/api/css.html#card-category
Share your thoughts in the comments
Please Login to comment...