Semantic-UI Item Content Header

Last Updated : 12 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.

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
            </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:

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

Semantic-UI Icon Header Content

skyridetim

Improve

Article Tags :

Semantic-UI Item Content Header

Similar Reads

Thank You!

What kind of Experience do you want to share?