Semantic-UI | Cards - GeeksforGeeks

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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"                rel="stylesheet" />              </head>      <body>          <div class="ui container">             <div class="ui card">              <div class="image">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">              </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">          </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"                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="https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">                  <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="https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">                  <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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">          </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"                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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">          </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"             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="https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">              </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="https://media.geeksforgeeks.org/wp-content/uploads/20200509221352/image30.png">              </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="https://code.jquery.com/jquery-3.1.1.min.js"               integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="               crossorigin="anonymous">        </script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">         </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"               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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">         </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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"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="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">         </script>       </body>  </html>
Output: 
You can try different things in the card from semantic-UI. 
adnanirshad158
Semantic-UI
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Top 10 Angular Libraries For Web Developers