Semantic-UI Header Dividing Variations - Coding

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 header provides a short summary of content and it offers us different variations of the header, like Dividing, Block, Attached, Floating, Text alignment, colored, and Inverted variants. Here in this article, we will know about the Dividing variant of the header.

Semantic-UI Header Variations Divider Variant Class:

dividing: This class is used to create a divider between two content.

Syntax:

<element class="ui dividing header">
      .......
</element >

Example 1: Below example illustrate the Semantic-UI Header Variations Divider Variant:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic-UI Header Dividing Variations</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 Header Variations Divider 
    </strong> 
    <br><br> 
  
    <p> 
      With the idea of imparting programming knowledge, 
      Mr. Sandeep Jain, an IIT Roorkee alumnus started 
      a dream, GeeksforGeeks. Whether programming excites 
      you or you feel stifled, wondering how to prepare  
      for interview questions or how to ace data structures 
      and algorithms, GeeksforGeeks is a one-stop solution. 
    </p> 
  
    <strong class="ui dividing header"> 
      A Computer Science Portal for Geeks 
    </strong> 
      
    <p> 
      Free Tutorials, Millions of Articles, Live, 
      Online and Classroom Courses, Frequent Coding 
      Competitions, Webinars by Industry Experts,  
      Internship opportunities and Job Opportunities. 
    </p> 
  </center> 
</body> 
  
</html>

Output:

Semantic-UI Header Variations Divider

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title>Semantic-UI Header Dividing Variations</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 Header Variations Divider 
    </strong> 
    <br><br> 
  
    <p> 
      With the idea of imparting programming knowledge, 
      Mr. Sandeep Jain, an IIT Roorkee alumnus started 
      a dream, GeeksforGeeks. Whether programming excites 
      you or you feel stifled, wondering how to prepare  
      for interview questions or how to ace data structures 
      and algorithms, GeeksforGeeks is a one-stop solution. 
    </p> 
  
    <strong class="ui dividing green header"> 
      A Computer Science Portal for Geeks 
    </strong> 
      
    <p> 
      Free Tutorials, Millions of Articles, Live, 
      Online and Classroom Courses, Frequent Coding 
      Competitions, Webinars by Industry Experts,  
      Internship opportunities and Job Opportunities. 
    </p> 
  </center> 
</body> 
  
</html>

Output:

Semantic-UI Header Dividing Variations

Reference: https://semantic-ui.com/elements/header.html#dividing

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Input Labeled Variation
Semantic-UI Dropdown Multiple Selection Type
Semantic-UI Progress Attached Variation
Semantic-UI Icon Header Content
Semantic-UI Card Floated Content Variation

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9