Semantic-UI Card Colored Variation
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
Please Login to comment...