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.
A card is an essential element in our website when we want to display information such as title, image, etc. in a form of a card that comes in different shapes and sizes.
Semantic-UI Card Types: There are two types of cards in the Semantic UI.
- Card: It is used to display a single card.
- Cards: It is used to display multiple cards.
Syntax:
<div class="ui cards">
<div class="card">
....
</div>
....
</div>
Example 1: In the following program, we will be making a single card using the type card.
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" >
< link rel = "stylesheet" href =
< script src =
</ script >
</ head >
< body >
< div class = "ui green huge header" >
GeeksforGeeks
</ div >
< div class = "ui large header" >Card</ div >
< br >
< div class = "ui card" >
< div class = "image" >
< img src =
</ div >
< div class = "content" >
< a class = "header" >GeeksforGeeks </ a >
< div class = "meta" >
< span class = "founded" >Founded in 2009</ span >
</ div >
< div class = "description" >
GeeksforGeeks provides a variety of services
for you to learn, thrive and also have fun such
as Free Tutorials, Millions of Articles, Live,
Online and Classroom Courses ,Frequent Coding
Competitions,etc.
</ div >
</ div >
< div class = "extra content" >
< a >
< i class = "user icon" ></ i >
50M Followers
</ a >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Card Types
Example 2: In the following example, we will be making multiple cards using the type 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" >
< link rel = "stylesheet" href =
< script src =
</ script >
</ head >
< body >
< div class = "ui green huge header" >
GeeksforGeeks
</ div >
< div class = "ui large header" >Cards</ div >
< br >
< div class = "ui cards" >
< div class = "blue card" >
< div class = "content" >
< div class = "header" >
Sachin Tendulkar
</ div >
< div class = "meta" >
Sport: Cricket
</ div >
< div class = "description" >
Sachin Tendulkar is known as
the God of Cricket.
</ div >
< div class = "extra content" >
< a >
< i class = "user icon" ></ i >
225M Followers
</ a >
</ div >
< div class = "ui bottom attached button" >
< i class = "add icon" ></ i >
Follow
</ div >
</ div >
</ div >
< div class = "green card" >
< div class = "content" >
< div class = "header" >
Roger Federer
</ div >
< div class = "meta" >
Sport: Tennis
</ div >
< div class = "description" >
Roger Federer is the best Tennis
player of the decade.
</ div >
< div class = "extra content" >
< a >
< i class = "user icon" ></ i >
205M Followers
</ a >
</ div >
< div class = "ui bottom attached button" >
< i class = "add icon" ></ i >
Follow
</ div >
</ div >
</ div >
< div class = "red card" >
< div class = "content" >
< div class = "header" >
Mo Salah
</ div >
< div class = "meta" >
Sport: Football
</ div >
< div class = "description" >
Mo Salah has scored the most
goals in Premier League.
</ div >
< div class = "extra content" >
< a >
< i class = "user icon" ></ i >
150M Followers
</ a >
</ div >
< div class = "ui bottom attached button" >
< i class = "add icon" ></ i >
Follow
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Card Types
Reference: https://semantic-ui.com/views/card.html
Last Updated :
20 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...