Semantic-UI Divider Variations Section Variant

Last Updated : 02 Feb, 2022

Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. It uses predefined CSS and jQuery to incorporate different frameworks.

In this article, let us discuss Section variation in the divider variations supported in Semantic UI. A divider is generally used to divide the content concisely into different sections.

The divider section variation divides the section into two halves with more margin space than any other divider. This type of divider is used when more space is required between any two sections. Section variation gives large margins to divide sections of web content.

Semantic-UI Divider Variations Section Variant Class:

section: This class is used to divide the header from each other.

Syntax:

<element class="ui header">....</element >
<element class="ui section divider">....</element>
<element class="ui header">...</element >

Below examples illustrate the Semantic-UI Divider Variations Section Variant:

Example 1: In the below example, we can see a section divider variation using a horizontal divider, which divides two sections into sectioned vertical sections.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />  
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <strong>Semantic UI Section divider variation</strong> 
    <h3 class="ui header"> Semantic UI </h3> 
    <p> 
        Semantic UI is a free open-source front-end 
        development framework that is equipped with 
        pre-built semantic components that helps create 
        responsive layouts using user-friendly HTML. 
        In terms of user-friendliness, Semantic UI is 
        better than Bootstrap. 
    </p> 
  
    <div class="ui section divider"></div> 
    <h3 class="ui header">  
        Semantic UI - Section type Divider  
    </h3> 
    <p> 
        Section variation divider divides the section 
        into two halves with more margin space than any 
        other divider. This type of divider is used when 
        more space is required between any two sections.  
    </p> 
  
</body> 
  
</html>

Output:

Semantic-UI Divider Variations Section Variant

Example 2: In the below example, we can see a section divider variation using a vertical divider, which divides two sections into sectioned vertical sections.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />  
</head> 
<body> 
    <h1>GeeksforGeeks</h1> 
    <strong>Semantic-UI Divider Variations Section Variant</strong> 
    <div class="ui segment"> 
        <div class="ui two column very relaxed grid"> 
            <div class="column"> 
                <h3 class="ui header"> Semantic UI </h3> 
                <p> 
                    Semantic UI is a free open-source front-end  
                    development framework that is equipped with 
                    pre-built semantic components that helps create 
                    responsive layouts using user-friendly HTML.  
                    In terms of user-friendliness, Semantic UI is 
                    better than Bootstrap. 
                </p> 
  
            </div> 
            <div class="column"> 
                <h3 class="ui header">  
                 Semantic UI - Inverted divider variation  
                </h3> 
                <p> 
                    Section variation divider divides the section  
                    into two halves with more margin space than any 
                    other divider. This type of divider is used when 
                    more space is required between any two sections. 
                </p> 
  
            </div> 
        </div> 
        <div class="ui sectioned vertical divider">AND</div> 
    </div> 
</body> 
  
</html>