Semantic-UI Card Doubling Variation
Last Updated :
24 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 and responsive.
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 doubling variations of semantic UI cards.
Semantic UI Card Variations Doubling Card Group Variant makes the card group arrange in a column layout with the card width double than original if the width of the window is less than a threshold i.e. 990px. We use the “doubling” class of semantic UI to create the doubling card group variation.
Semantic-UI Card Variations Doubling Card Group Variant Class:
- doubling: This class 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 doubling cards">
<div class="ui card">
</div>
</div>
Example 1: The following example demonstrates the doubling variation of the semantic UI card group. We can observe the column count decrease to two as a 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 Doubling variation</title>
<link rel="stylesheet" href=
</head>
<body style="padding: 20px;">
<h1>GeeksforGeeks</h1>
<strong>Semantic UI card Doubling Variation</strong>
<br>
<div class="ui three doubling 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 the doubling variation of the semantic UI card group. We can observe the column count decrease to three at first when the breakpoint is approached and then goes down to a two-column layout as the width is decreased further.
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>
<div class="ui six doubling cards">
<div class="ui fluid card">
<div class="header">
<h3>Geeksforgeeks</h3>
</div>
<div class="image">
<img src=
</div>
<div class="content">This is a basic card.</div>
</div>
<div class="ui fluid card">
<div class="header">
<h3>Geeksforgeeks</h3>
</div>
<div class="image">
<img src=
</div>
<div class="content">This is a basic card.</div>
</div>
<div class="ui fluid card">
<div class="header">
<h3>Geeksforgeeks</h3>
</div>
<div class="image">
<img src=
</div>
<div class="content">This is a basic card.</div>
</div>
<div class="ui fluid card">
<div class="header">
<h3>Geeksforgeeks</h3>
</div>
<div class="image">
<img src=
</div>
<div class="content">This is a basic card.</div>
</div>
<div class="ui fluid card">
<div class="header">
<h3>Geeksforgeeks</h3>
</div>
<div class="image">
<img src=
</div>
<div class="content">This is a basic card.</div>
</div>
<div class="ui fluid card">
<div class="header">
<h3>Geeksforgeeks</h3>
</div>
<div class="image">
<img src=
</div>
<div class="content">This is a basic card.</div>
</div>
</div>
</body>
</html>
|
Output:
Output
Reference: https://semantic-ui.com/views/card.html#doubling
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...