Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Divider Variations Section Variant

Improve Article
Save Article
  • Last Updated : 02 Feb, 2022
Improve Article
Save Article

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=
          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

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=
          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>


Output:

Reference: https://semantic-ui.com/elements/divider.html#section


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!