Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes. In this article, we will discuss the colored variations of semantic-Ui cards.
To create a colored variation of the semantic UI card, we use the desired color as a class along with the card class. For example, if we need a red-colored variation of semantic UI card, we use red and card as classes to parent <div>. This makes the color of the bottom border shadow of the card the mentioned color.
Semantic-UI Card Colored Variation Class:
- red: This class is used to set the color red.
- orange: This class is used to set the color orange.
- yellow: This class is used to set the color yellow.
- olive: This class is used to set the color olive.
- green: This class is used to set the color green.
- teal: This class is used to set the color teal.
- blue: This class is used to set the color blue.
- purple: This class is used to set the color purple.
- violet: This class is used to set the color violet.
- pink: This class is used to set the color pink.
- brown: This class is used to set the color brown.
- grey: This class is used to set the color grey.
- black: This class is used to set the color black
Syntax:
<div class="Colored-Variation-Class card">
content....
</div>Example: This example demonstrates various colored variations of the semantic-Ui card.
<!DOCTYPE html><html>
<head>
<link href=
rel="stylesheet"/>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>
Semantic UI card colored-variations
</strong><br/><br/>
</center>
<div class="ui four cards">
<div class="red card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="orange card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="yellow card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="olive card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="green card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="teal card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="blue card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
<div class="violet card">
<div class="image">
<img src=
</div>
<div class="content">
Geeksforgeeks Card
</div>
</div>
</div>
</body>
</html>
|
Output:
Output
Reference: https://semantic-ui.com/views/card.html#Colored