Skip to content
Related Articles

Related Articles

Semantic-UI Card Types

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 20 Feb, 2022
View Discussion
Improve Article
Save Article

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

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

Semantic-UI Card Types

Reference: https://semantic-ui.com/views/card.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!