Semantic-UI | Cards
Last Updated :
01 Oct, 2021
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. It uses a class to add CSS to the elements.
A card is used to displaying the content similar to a playing card.
Example 1: This example creating a simple card using Semantic-ui.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "ui container" >
< div class = "ui card" >
< div class = "image" >
< img src =
</ div >
< div class = "content" >
< a class = "header" >Geeksforgeeks</ a >
< div class = "description" >
A Computer SCience Portal.
</ div >
</ div >
< div class = "extra content" >
< a >
< i class = "user icon" ></ i >
1m Followers
</ a >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example 2:
This example creating a Group of Card using Semantic-ui.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui cards" >
< div class = "card" >
< div class = "content" >
< img class = "right floated mini ui image"
src =
< div class = "header" >
Geeksforgeeks
</ div >
< div class = "meta" >
A computer science Portal
</ div >
< div class = "description" >
Geeksforgeeks wants to follow you.
</ div >
</ div >
< div class = "extra content" >
< div class = "ui two buttons" >
< div class = "ui basic green button" >Approve</ div >
< div class = "ui basic red button" >Decline</ div >
</ div >
</ div >
</ div >
< div class = "card" >
< div class = "content" >
< img class = "right floated mini ui image"
src =
< div class = "header" >
Geeksforgeeks
</ div >
< div class = "meta" >
A computer Science Portal.
</ div >
< div class = "description" >
Geeksforgeeks wants to be your friend.
</ div >
</ div >
< div class = "extra content" >
< div class = "ui two buttons" >
< div class = "ui basic green button" >Approve</ div >
< div class = "ui basic red button" >Decline</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example 3: This example creating a card that contains some button using Semantic-ui.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui card" >
< div class = "content" >
< div class = "header" >Geeksforgeeks</ div >
</ div >
< div class = "content" >
< h4 class = "ui sub header" >Activity</ h4 >
< div class = "ui small feed" >
< div class = "event" >
< div class = "content" >
< div class = "summary" >
Your friend Rahul Joined the course.
</ div >
</ div >
</ div >
< div class = "event" >
< div class = "content" >
< div class = "summary" >
Started next Friday
</ div >
</ div >
</ div >
</ div >
</ div >
< div class = "extra content" >
< button class = "ui button" >
Join Course
</ button >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output:
Image card with effect on hover: For this, you need the jQuery library imported.
jQuery Code
$('.special.cards .image').dimmer({
on: 'hover'
});
Complete code:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px;" class = "ui container" >
< div class = "ui special cards" >
< div class = "card" >
< div class = "blurring dimmable image" >
< div class = "ui dimmer" >
< div class = "content" >
< div class = "center" >
< div class = "ui inverted button" >
Add Friend
</ div >
</ div >
</ div >
</ div >
< img src =
</ div >
< div class = "content" >
< a class = "header" >Geeksforgeeks</ a >
< div class = "meta" >
< span class = "date" >Newly Joined</ span >
</ div >
</ div >
< div class = "extra content" >
< a >
< i class = "users icon" ></ i >
10 Friends
</ a >
</ div >
</ div >
< div class = "card" >
< div class = "blurring dimmable image" >
< div class = "ui inverted dimmer" >
< div class = "content" >
< div class = "center" >
< div class = "ui primary button" >
Add Friend
</ div >
</ div >
</ div >
</ div >
< img src =
</ div >
< div class = "content" >
< a class = "header" >Geeksforgeeks</ a >
< div class = "meta" >
< span class = "date" >
You and Geeksforgeeks have 20 mutual Friends
</ span >
</ div >
</ div >
< div class = "extra content" >
< a >
< i class = "users icon" ></ i >
500 Friends.
</ a >
</ div >
</ div >
</ div >
</ div >
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$('.special.cards .image').dimmer({
on: 'hover'
});
</ script >
</ body >
</ html >
|
Output:
Example 5: This example creating a card that contains some button using Semantic-ui.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui cards" >
< div class = "card" >
< div class = "content" >
< div class = "header" >Geeksforgeeks</ div >
< div class = "description" >
A Computer Science Portal.
</ div >
</ div >
< div class = "ui bottom attached button" >
< i class = "add icon" ></ i >
Join
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example 6: This example creating an approval card using Semantic-ui.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px" class = "ui container" >
< div class = "ui card" >
< div class = "content" >
< i class = "right floated like icon" ></ i >
< i class = "right floated star icon" ></ i >
< div class = "header" >Geeksforgeeks</ div >
< div class = "description" >
< p ></ p >
</ div >
</ div >
< div class = "extra content" >
< span class = "left floated like" >
< i class = "like icon" ></ i >
Like
</ span >
< span class = "right floated star" >
< i class = "star icon" ></ i >
Star
</ span >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output:
You can try different things in the card from semantic-UI.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...