Semantic-UI Card Header Content

Last Updated : 11 Feb, 2022

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <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:

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

Semantic-UI Card Content

geethika1129

Improve

Article Tags :

Semantic-UI Card Header Content

Similar Reads

Thank You!

What kind of Experience do you want to share?