Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | Header

  • Last Updated : 11 May, 2020

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI has really cool headers they can be used with text, Icons and many more. Let’s see some example of Semantic-UI Headers.

Example 1: In this example, we will see the different kinds of page headers.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h1 class="ui header">First header</h1>
            <h2 class="ui header">Second header</h2>
            <h3 class="ui header">Third header</h3>
            <h4 class="ui header">Fourth header</h4>
            <h5 class="ui header">Fifth header</h5>
            <h6 class="ui header">Sixth header</h6>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 2: In this example, we will see the icon as a header.






<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h1>Icon Header</h1>
            <h2 class="ui center aligned icon header">
                <i class="circular users icon"></i>
                Users
            </h2>
            <h2 class="ui center aligned icon header">
                <i class="circular chess icon"></i>
                Chess
            </h2>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 3: In this example, we will see header with description

.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2 class="ui header">
                GeeksforGeeks
                <div class="sub header">
                  A Computer Science portal for Geeks.
                </div>
            </h2>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 4: In this example, we will see header with image.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Image as Header</h2>
            <div class="ui compact menu">
                <h2 class="ui header">
                    <img class="ui image" src=
                    <div class="content">
                        geeksforgeeks
                    </div>
                </h2>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 5: In this example, we will see header with icon.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Header with Icon</h2>
            <h2 class="ui header">
                <i class="users icon"></i>
                <div class="content">
                     Friend List
                    <div class="sub header">
                     Only Private ones.
                    </div>
                </div>
            </h2>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 6: In this example, we will see block heading.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Block Header</h2>
            <h3 class="ui block header">
                Geeksforgeeks
            </h3>
            Learn anything related to computer Science.
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 7: In this example, we will see floating header.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Floating Header</h2>
            <div class="ui clearing segment">
                <h3 class="ui right floated header">
                    Previous
                </h3>
                <h3 class="ui left floated header">
                    Next
                </h3>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Note: You can also inverted header by adding class inverted to your segment and header. You can directly run these examples by clicking on Run on IDE.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!