Open In App

Semantic-UI Card Stackable Variation

Improve
Improve
Like Article
Like
Save
Share
Report

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 and responsive. Semantic UI treats words and classes as exchangeable concepts.

The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes. 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 discuss the stackable variations of semantic UI cards.

Semantic UI Card Variations stackable Card Group Variant makes the card group arrange in a single column layout i.e. stacked one after the other if the width of the window is less than a threshold i.e. 766px. We use the “stackable” class of semantic UI to create the stackable card group variation.

Semantic-UI Card Variations Stackable Card Group Variant Class:

  • stackable: This class is used to force the card group to a single column layout as soon as window width crosses the breakpoint of width less than 766px. A grid can have its columns stack on top of each other after reaching mobile breakpoints.

Syntax:

<div class="ui stackable cards">
    <div class="ui card">
    </div>
</div>

Example 1: The following example demonstrates the stackable variation of the semantic UI card group. We can observe the column count decrease to one as the breakpoint size is approached.

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 Stackable variation</title>
  
    <link rel="stylesheet" href=
</head>
  
<body style="padding: 20px;">
    <h1>GeeksforGeeks</h1>
  
    <strong>Semantic UI card stackable Variation</strong>
    <br>
    <div class="ui four stackable cards">
        <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:

Output

Example 2: The following example demonstrates various groups of cards with different column lengths all decreasing to a single column layout.

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 Stackable variation</title>
    <link rel="stylesheet" href=
</head>
  
<body style="padding: 20px;">
    <h1>GeeksforGeeks</h1>
    <strong>Semantic UI card stackable Variation</strong>
    <br>
    <div class="ui six stackable cards">
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 1</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 2</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 3</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 4</h1>
            </div>
        </div>
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 5</h1>
            </div>
        </div>
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 6</h1>
            </div>
        </div>
    </div>
    <div class="ui three stackable cards">
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 1</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 2</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 3</h1>
            </div>
        </div>
    </div>
    <div class="ui two stackable cards">
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 1</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 2</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 3</h1>
            </div>
        </div>
  
        <div class="ui fluid card">
            <div class="content">
                <h1>Card 4</h1>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Output

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



Last Updated : 21 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads