Semantic-UI Card Column Count Variation
Last Updated :
21 Mar, 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 column count variation of the semantic UI group of cards.
Semantic UI Card Variations Column Count Card Group Variant makes the card group arrange in a layout with the desired number of columns. We use the number of columns as the class along with UI and cards classes of semantic UI to create the column count card group variation.
Semantic-UI Card Variations Column Count Card Group Variant Class:
- column-count: This class is used to force the card group to a layout of the desired number of columns where the number of columns itself is used as class.
Syntax:
<div class="UI <number-of-columns> cards">
<div class="ui card">
</div>
</div>
Example 1: The following example demonstrates the column count variation of the semantic UI card group. This example has a 5 column group of cards.
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 column count variation</title>
<link rel="stylesheet"
href=
</head>
<body style="padding: 20px;">
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<strong>Semantic UI card column count Variation</strong>
</center><br>
<div class="ui five 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 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>
</div>
</body>
</html>
|
Output:
Output
Example 2: The following example demonstrates the column count variation of the semantic UI card group. This example has a 3 column group of cards.
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 column count variation</title>
<link rel="stylesheet"
href=
</head>
<body style="padding: 20px;">
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<strong>Semantic UI card column count Variation</strong>
</center><br>
<div class="ui three 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 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>
</div>
</body>
</html>
|
Output:
Output
Reference: https://semantic-ui.com/views/card.html#column-count
Share your thoughts in the comments
Please Login to comment...