Open In App

Semantic-UI Card Header Content

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.

Cards in Semantic UI is a way to represent the web content just like the playing cards. Using Semantic UI, we can represent the information in the form of cards in a very simple way. Semantic UI provides cards in many variations and display different types of content. It provides a card that includes a header which is the card header content. 

In this article, we will get to know about card header content and the know-how to implement it using code examples. The card in which the header is included is known as card header content. The layout of the card header content may contain the following.

Semantic UI Card header Content class:

  • header: It is used to set the header of the card.

Syntax:

<div class="card">
    <div class="content">
      <div class="header">
        ....
      </div>
    </div>
</div>

Example: In the card include an HTML div containing class content and for the header include class header, for description, use class description and for additional information, use class name meta. 

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=
    <style>
       body {
         margin-left: 10px;
         margin-right: 10px;
       }
    </style>
</head>
  
<body>
    <center>
       <h1 class="header ui green">GeeksforGeeks</h1>
       <strong>Semantic UI Card header content</strong>
    </center><br>
    <div class="ui cards">
        <div class="card">
            <div class="content">
                <div class="header">Interviews</div>
                <div class="meta">
                  A website for interview preparation</div>
                <div class="description">
                    As the placement season is back, 
                    GeeksforGeeks is here to help you 
                    crack the interview.
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Card Header Content

Semantic-UI Card Header Content

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



Last Updated : 11 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads