Semantic-UI Card Types
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"> <!--Creating a single card--> <!--Inserting an image into the card--> <div class="image"> <img src= </div> <div class="content"> <!--Giving the title --> <a class="header">GeeksforGeeks </a> <div class="meta"> <span class="founded">Founded in 2009</span> </div> <!--Information about the card--> <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> <!--Adding extra content at the bottom of the card --> <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> <!--Creating Cards--> <div class="ui cards"> <!--Making the border blue--> <div class="blue card"> <div class="content"> <!--Title of card--> <div class="header"> Sachin Tendulkar </div> <div class="meta"> Sport: Cricket </div> <!--Information of card--> <div class="description"> Sachin Tendulkar is known as the God of Cricket. </div> <!--Extra content at the bottom--> <div class="extra content"> <a> <i class="user icon"></i> 225M Followers </a> </div> <!--Button at the bottom--> <div class="ui bottom attached button"> <i class="add icon"></i> Follow </div> </div> </div> <!--Making the border green--> <div class="green card"> <div class="content"> <!--Title of card--> <div class="header"> Roger Federer </div> <div class="meta"> Sport: Tennis </div> <!--Information of card--> <div class="description"> Roger Federer is the best Tennis player of the decade. </div> <!--Extra content at the bottom--> <div class="extra content"> <a> <i class="user icon"></i> 205M Followers </a> </div> <!--Button at the bottom--> <div class="ui bottom attached button"> <i class="add icon"></i> Follow </div> </div> <!--Second card content over--> </div> <!--Second card ends--> <div class="red card"> <!--Making the border red--> <div class="content"> <div class="header"> <!--Title of card--> Mo Salah </div> <div class="meta"> Sport: Football </div> <!--Information of card--> <div class="description"> Mo Salah has scored the most goals in Premier League. </div> <!--Extra content at the bottom--> <div class="extra content"> <a> <i class="user icon"></i> 150M Followers </a> </div> <!--Button at the bottom--> <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
Please Login to comment...