Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.
Blaze UI Cards are simple containers used to contain some details inside them. It has a minimalistic design that divides the sections of data on the webpage. The cards contain a header, body, and footer.
Blaze UI Cards Attributes:
- blaze-card: This element creates a card.
- blaze-card-header: This styles as the heading of the card.
- blaze-card-body: This element styles as the body content of the card.
- blaze-card-footer: This element styles as the footer of the card.
Blaze UI Cards Types:
- Simple Cards: These types of cards are basic cards and have a heading, body, and footer.
- Divider: In this type of card, we can create the divider in between the content of the cards.
- Colors: Cards can have different colors in different parts such as the heading and the body can have colors in them.
- Block Footer: In this type, the footer of the card pushes the buttons to the bottom edge leaving no margin.
- Card Items: The card can contain items that can separate itself from other items on the card.
- Grouped Items: The card can categorize items into groups to create grouped items.
Syntax: Create a blaze UI card as follows:
<blaze-card>
<blaze-card-header>
<!-- Heading -->
</blaze-card-header>
<blaze-card-body>
<!-- Paragraph -->
</blaze-card-body>
<blaze-card-footer>
<!-- Footer -->
</blaze-card-footer>
</blaze-card>Example 1: In the following example, we have a simple card with some details.
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" />
<title>GeeksforGeeks | BlazeUI</title>
<link
rel="stylesheet"
href=
/>
<script
type="module"
src=
></script>
<script
nomodule=""
src=
></script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Cards</strong>
<br />
<br />
</center>
<blaze-card>
<blaze-card-header>
<h2>Welcome to GeeksforGeeks</h2>
</blaze-card-header>
<blaze-card-body>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</blaze-card-body>
<blaze-card-footer>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
</blaze-card-footer>
</blaze-card>
</div>
<script></script>
</body>
</html>
|
Output:
Example 2: In the following example, we have a style card that will contain the details.
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" />
<title>GeeksforGeeks | BlazeUI</title>
<link
rel="stylesheet"
href=
/>
<script
type="module"
src=
></script>
<script
nomodule=""
src=
></script>
<script src=
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Cards</strong>
<br />
<br />
</center>
<blaze-card>
<div class="c-card__item c-card__item--brand">
<h2>Welcome to GeeksforGeeks</h2>
</div>
<div class="c-card__item c-card__item--warning">
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</div>
<div class="c-card__item c-card__item--success">
<p class="u-paragraph">
A computer science portal for geeks.
</p>
</div>
</blaze-card>
</div>
<script></script>
</body>
</html>
|
Output:
Example 3: In the following example, we have card items and grouped card items with a divider in the card.
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" />
<title>GeeksforGeeks | BlazeUI</title>
<link
rel="stylesheet"
/>
<script
type="module"
></script>
<script
nomodule=""
></script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Blaze UI Cards</strong>
<br />
<br />
</center>
<div class="c-card c-card--grouped">
<div class="c-card__item c-card__item--brand">
<h2>Welcome to GeeksforGeeks</h2>
</div>
<div class="c-card__item">Data Structures</div>
<div class="c-card__item">Algorithms</div>
<div role="separator" class=
"c-card__item c-card__item--divider">
Programming Languages
</div>
<div class="c-card__item">Java</div>
<div class="c-card__item">C++</div>
<div class="c-card__item">Python3</div>
</div>
<div class="c-card__item c-card__item--success">
<p class="u-paragraph">
A computer science portal for geeks.
</p>
</div>
</div>
<script></script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/cards/