Semantic-UI | Cards
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.
Please Login to comment...