Open In App

Semantic-UI Item Content Header

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.

Semantic UI Item content offers us different content like image, content, header, metadata, link, description, extra content, and rating. In this article, we will discuss and learn about the header content which plays an important role in item content.

Semantic UI Item Content header class is used to create an item’s header, which is one of the most required things in the content.

Semantic UI Item Content Header Class:

  • header: This class is used to create the header of the items.

Syntax:

<a class="header">...</a>

Example: The below example illustrate the Semantic UI Item Content Header. This demonstrates an item with an image logo using item class with header, content, and description classes.  

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Item Content Header</title>
  
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
          
        <strong>Semantic-UI Item Content Header</strong>
        <br><br>
    </center>
  
    <div class="ui items">
        <div class="item">
            <a class="ui small image">
                <img src=
            </a>
  
            <div class="content">
                <a class="header">GeeksforGeeks</a>
                <div class="description">
                    <p>
                        Free Tutorials, Millions of 
                        Articles, Live, Online and 
                        Classroom Courses ,Frequent 
                        Coding Competitions, Webinars
                        by Industry Experts, Internship 
                        opportunities and Job 
                        Opportunities.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Item Content Header

Semantic-UI Item Content Header

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



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