semantic-ui
  1. semantic-ui-divider
PreviousNext

Semantic UI Divider - Semantic Elements

Semantic UI is a popular front-end development framework that uses semantic HTML to help developers create visually appealing and responsive websites. In this tutorial, we will explore the Semantic UI Divider element, its syntax, examples, output, explanation, use, important points, and summary.

Syntax

<div class="ui divider"></div>

Example

<div class="ui raised segment">
  <p>This is some content inside a segment.</p>
</div>
<div class="ui divider"></div>
<div class="ui raised segment">
  <p>This is some more content inside another segment.</p>
</div>
Try Playground

Vertical Divider

A divider can segment content vertically

<div class="ui segment">
  <div class="ui two column very relaxed grid">
    <div class="column">
      <p>This is some content inside a segment.</p>
    </div>
    <div class="column">
      <p>This is some more content inside another segment.</p>
    </div>
  </div>
  <div class="ui vertical divider">
    and
  </div>
</div>
Try Playground

Stackable Grid

A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid.

<div class="ui placeholder segment">
  <div class="ui two column very relaxed stackable grid">
    <div class="column">
      <div class="ui form">
        <div class="field">
          <label>Username</label>
          <div class="ui left icon input">
            <input type="text" placeholder="Username">
            <i class="user icon"></i>
          </div>
        </div>
        <div class="field">
          <label>Password</label>
          <div class="ui left icon input">
            <input type="password">
            <i class="lock icon"></i>
          </div>
        </div>
        <div class="ui blue submit button">Login</div>
      </div>
    </div>
    <div class="middle aligned column">
      <div class="ui big button">
        <i class="signup icon"></i>
        Sign Up
      </div>
    </div>
  </div>
  <div class="ui vertical divider">
    Or
  </div>
</div>
Try Playground

Explanation

The ui divider element creates a horizontal line that separates two sections of content on a webpage. It is often used to break up content and improve readability. The ui divider element is also customizable and can be styled to fit the design of the website.

Use

The Semantic UI Divider element is useful for dividing content on a webpage into different sections. It can help improve the visual flow and readability of content.

Important Points

  • The ui divider element creates a horizontal line to separate content on a webpage.
  • It is customizable and can be styled to fit the design of the website.

Summary

In this tutorial, we learned about the Semantic UI Divider element, its syntax, examples, output, explanation, use, important points, and summary. Semantic UI's rich set of semantic elements, classes, and UI components help developers create visually appealing and responsive websites with ease. The ui divider element is one of these components that can help improve the readability of content on a webpage.

ContainerFlag
Published on: