Open In App

Semantic-UI | Cards

Improve
Improve
Like Article
Like
Save
Share
Report

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.
 



Last Updated : 01 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads