Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Card Variations

Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
Improve Article
Save Article

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.

Semantic UI offers several card variations like fluid card, centered card, raised card, link card, floated content, text alignment, colored, column count, stackable, and doubling. In this article, we will learn about all the card variations.

Semantic-UI Card Variations:

  • Fluid: This is used to force the card element to take the entire width of the container.
  • Centered: The entire card should be enclosed in .centered class to center the card. 
  • Raised: The entire should be enclosed with this class to enable the raising of the card above page. 
  • Link: It enables a raised card that moves when hovered.
  • Floated: This is used to float the content into the left/right side.
  • Text Alignment: This is used to align the text inside a card.
  • Colored: This is used to set the color of the card.
  • Column Count: This is used to set how many cards should exist in a row.
  • Stackable: This is used to automatically stack a group of cards in rows to a single columns on mobile phone devices.
  • Doubling: This is used to force the card group to column layout with the card width double than the original as soon as window width crosses the breakpoint of width less than 990px. This class help to make a group of cards that can double its column width for mobile.

Syntax:

<div class="ui Card-Variations card">
  <div class="image">
    ...
  </div>
  
  <div class="content">
    ...
  </div>
</div>

Example 1: Below is the code that demonstrates the use of Semantic-UI Card fluid Variations.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Semantic-UI Card Variations</title>
   
  <link rel="stylesheet"
        href=
</head>
 
<body style="margin-inline: 10px;">
    <h1>GeeksforGeeks</h1>
    <strong>Semantic UI card fluid</strong>
    <br>
    <div class="ui three column grid">   
        <div class="column">
            <div class="ui fluid card">
                <div class="image">
                    <img src=
                </div>
               
                <div class="content">
                    <a class="header">
                    geeksforgeeks
                    </a>
                </div>
            </div>
        </div>
 
        <div class="column">
            <div class="ui fluid card">
                <div class="image">
                    <img src=
                </div>
               
                <div class="content">
                    <a class="header">
                    geeksforgeeks
                    </a>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="ui fluid card">
                <div class="image">
                    <img src=
                </div>
               
                <div class="content">
                    <a class="header">
                    geeksforgeeks
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
   
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 2: Below is the code that demonstrates the use of Semantic-UI Card-centered Variations.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Card Variations</title>
    <link rel="stylesheet"
          href=
</head>
 
<body>
  <center>
    <h1 class="header ui green">GeeksforGeeks</h1>
    <strong>Semantic UI Card Centered Variation</strong>
  </center>
  <div class="ui centered card">
    <div class="image">
      <img src=
    </div>
 
    <div class="content">
      <a class="header">GeeksforGeeks</a>
    </div>
  </div>
</body>
 
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 3: Below is the code that demonstrates the use of Semantic-UI Card raised Variations.

HTML




<!DOCTYPE html>
<html>
   
<head>
  <title>Semantic-UI Card Raised Variation</title>
 
  <link href=
       rel="stylesheet"/>
  <script src=
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous">
  </script>
  <script src=
  </script>
</head>
   
<body>
  <center>
    <h1 class="header ui green">GeeksforGeeks</h1>
    <strong>Semantic UI Card Raised Variation</strong>
    <div class="ui raised card">
    <div class="content">
       <div class="header">GeeksforGeeks</div>
       <div class="meta">
        <span class="category">
          Website for interview preparation
        </span>
       </div>
       
        <div class="description">
           
 
<p>
            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.
          </p>
 
 
 
        </div>
      </div>
       
      <div class="extra content">
        <div class="right floated author">
        <img class="ui avatar image"
             src=
        GeeksforGeeks           
        </div>
      </div>
    </div>       
  </center>
</body>
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 4: Below is the code that demonstrates the use of Semantic-UI Card link Variations.

HTML




<html>
<head>
  <title>Semantic-UI Card Link Variation</title>
 
  <link href=
        rel="stylesheet"/>
  <script src=
          integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous">
  </script>
  <script src=
  </script>
</head>
 
<body>
  <center>
    <h1 class="header ui green">GeeksforGeeks</h1>
    <strong>Semantic UI Card Link Variation</strong>
    <div class="ui link card">
    <div class="content">
      <div class="header">GeeksforGeeks</div>
      <div class="meta">
        <span class="category">
          Website for interview preparation
        </span>
      </div>
      <div class="description">
         
 
<p>
          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.
        </p>
 
 
 
      </div>
    </div>
    <div class="extra content">
        <div class="right floated author">
          <img class="ui avatar image"
               src=
          GeeksforGeeks
        </div>
      </div>
    </div>   
  </center>
</body>
   
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 5: Below is the code that demonstrates the use of Semantic-UI Card floated content Variations.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Card Floated Content Variation
    </title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Card Floated Content Variation</h3>
 
        <div class="ui card">
            <div class="content">
                <div class="header">GeeksforGeeks</div>
                <hr>
                <div class="meta">
                    <span class="time">
                        Published: 1 March 2022
                    </span>
                </div>
                <hr>
 
                <div class="description">
                    <p class="ui justified container">
                        A Computer Science portal for geeks.
                        It contains well written, well thought
                        and well explained computer science
                        and programming articles, ...
                    </p>
 
 
 
 
                </div>
            </div>
            <div class="extra content">
                <div class="right floated author">
                    <div class="description">
                        Author: <i>Sandeep Jain</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 6: Below is the code that demonstrates the use of Semantic-UI Card text alignment Variations.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Semantic UI card</title>
   
  <link rel="stylesheet"
        href=
</head>
 
<body style="margin-inline: 10px;">
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>Semantic UI card fluid</strong>
        <br>
 
        <div class="ui card">
            <div class="content">
                <div class="left aligned header">Jenny Hess</div>
                <div class="right aligned description">
                 
 
<p>GeeksforGeeks is a Computer Science Portal.</p>
 
 
                </div>
            </div>
             
            <div class="extra content">
                <div class="center aligned author">
                <img class="ui avatar image"
                     src=
                  GfG
                </div>
            </div>
        </div>
    </center>
</body>
   
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 7: Below is the code that demonstrates the use of Semantic-UI Card colored Variations.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Semantic-UI Card Variations</title>
  <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:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 8: Below is the code that demonstrates the use of Semantic-UI Card column count Variations.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Semantic-UI Card Variations</title>
  <link rel="stylesheet"
    href=
</head>
 
<body style="margin-inline: 10px;">
  <center>
    <h1>GeeksforGeeks</h1>
    <strong>Semantic UI card column count</strong>
    <br><br><br>
    <div class="ui two cards">
      <div class="card">
        GeeksforGeeks is a Computer Science portal.
      </div>
      <div class="card">
        GeeksforGeeks is a Computer Science portal.
      </div>
      <div class="card">
        GeeksforGeeks is a Computer Science portal.
      </div>
     </div>
  </center>
</body>
 
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 9: Below is the code that demonstrates the use of Semantic-UI Card stackable Variations.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>Semantic-UI Card Variations</title>
  <link rel="stylesheet"
        href=
</head>
 
<body style="margin-inline: 10px;">
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>Semantic UI card stackable</strong>
        <br><br><br>
 
        <div class="ui four stackable cards">
            <div class="card">
                GeeksforGeeks is Computer Science Portal!
            </div>
            <div class="card">
                GeeksforGeeks is Computer Science Portal!
            </div>
            <div class="card">
                GeeksforGeeks is Computer Science Portal!
            </div>
            <div class="card">
                GeeksforGeeks is Computer Science Portal!
            </div>
            <div class="card">
                GeeksforGeeks is Computer Science Portal!
            </div>
            <div class="card">
                GeeksforGeeks is Computer Science Portal!
            </div>
        </div>
    </center>
</body>
 
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Example 10: Below is the code that demonstrates the use of Semantic-UI Card doubling Variations.

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>Semantic UI card Doubling variation</title>
    <link rel="stylesheet"
          href=
</head>
 
<body style="padding: 20px;">
    <h1>GeeksforGeeks</h1>
    <strong>Semantic UI card Doubling Variation</strong>
    <br>
    <!-- doubling refers to a group of cards can
        double its column width for mobile-->
    <div class="ui three doubling cards">
        <!-- fluid card takes up the width
                of its parent container-->
        <div class="ui fluid card">
            <div class="image">
                <img src=
            </div>
        </div>
 
        <div class="ui fluid card">
            <div class="image">
                <img src=
            </div>
        </div>
 
        <div class="ui fluid card">
            <div class="image">
                <img src=
            </div>
        </div>
        <div class="ui fluid card">
            <div class="image">
                <img src=
            </div>
        </div>
 
        <div class="ui fluid card">
            <div class="image">
                <img src=
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Card Variations

Semantic-UI Card Variations

Reference: https://semantic-ui.com/views/card.html#fluid-card


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!