Semantic-UI | Header
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.
Please Login to comment...