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 =
< link rel = "stylesheet" href =
< script src =
< script src =
< 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 =
< link rel = "stylesheet" href =
< script src =
< script src =
< 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 >
|
Output
Reference: https://onsen.io/v2/api/css.html#card-category
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...