Skip to content
Related Articles

Related Articles

Semantic-UI Card Variations Fluid Card Variant

View Discussion
Improve Article
Save Article
Like Article
  • 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.

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

Semantic UI Card Variations Fluid Card Variant takes the size or width of the container with which it is enclosed as it’s free to flow.

Semantic-UI Card Variations Fluid Card Variant Class:

  • fluid: This class is used to force the card element to take the entire width of the container.

Note: You can arrange all these fluid variation cards in the form of grids

Syntax:

<div class="ui fluid card">
      <div class="...">
        <!-- image -->
      </div>
      <div class="...">
        <!-- description -->
      </div>
</div>

Below example illustrates the Semantic-UI Card Variations Fluid Card Variant

Example: The following example demonstrates the card fluid class. We can observe the image as completely taking the shape of the container since we used card fluid variation.

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</title>
    <link rel="stylesheet"
          href=
     <style>
         body {
           margin-left:10px;
           margin-right:10px;
         }
     </style>
</head>
 
<body>
    <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 Fluid Card Variant

Semantic-UI Card Variations Fluid Card Variant

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!