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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
       
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="orange card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="yellow card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="olive card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="green card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="teal card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="blue card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
 
    <div class="violet card">
      <div class="image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/>
      </div>
 
      <div class="content">
        Geeksforgeeks Card
      </div>
    </div>
  </div>
</body>
 
</html>