Semantic-UI Card Colored Variation
Last Updated :
22 Feb, 2022
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.
HTML
<!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
Share your thoughts in the comments
Please Login to comment...