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.
A divider is generally used to divide the content concisely into different sections. Semantic UI has 3 different types of dividers, which can have 5 different variations as listed below. In this article, let us discuss the different divider variations of horizontal divider type supported in Semantic UI.
Semantic-UI Divider Variations: As we mentioned in the above paragraph that we have three types of divider and each types has the fixed 5 variant of divider.
- Inverted: Inverted Variation will invert the original colors to their straight opposite color.
- Fitted: Fitted Variation will fit the divider without leaving space above and below.
- Hidden: Hidden variation creates a divider that is hidden.
- Section: Section variation gives large margins to divide sections of web content.
- Clearing: Clearing variation clear the contents above the divider.
Syntax:
<div class="ui Divider-Variation divider"> ... </div>
Below examples illustrate the Semantic-UI Divider Variations:
Example 1:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI vertical divider</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< strong >Semantic-UI Divider Variations</ strong >
< br >< br >
< strong >Inverted Divider:</ strong >
< div class = "ui inverted segment" >
< 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.
It uses predefined CSS and jQuery to incorporate
different frameworks.
</ p >
< div class = "ui inverted divider" ></ div >
< 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.
It uses predefined CSS and jQuery to incorporate
different frameworks.
</ p >
</ div >
< strong >Fitted Divider:</ strong >
< div class = "ui segment" >
Geeksforgeeks
< div class = "ui fitted divider" >
We provide a variety of services for you to learn,
thrive and also have fun!
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI vertical divider</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< strong >Semantic-UI Divider Variations</ strong >
< br >< br >
< hr >< hr >
< strong >Hidden Divider:</ strong >
< br >
< strong class = "ui header" >GeeksforGeeks</ 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 >
< div class = "ui hidden divider" ></ div >
< strong class = "ui header" >Geeks Portal</ 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 >
< hr >< hr >
< strong >Section Divider:</ strong >
< br >
< strong class = "ui header" >GeeksforGeeks</ 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 >
< div class = "ui section divider" ></ div >
< strong class = "ui header" >Geeks Portal</ 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 >
< hr >< hr >
< strong >Clearing Divider:</ strong >
< br >
< div class = "ui segment" >
< strong class = "ui right floated header" >
Geeks Portal
</ strong >
< div class = "ui clearing divider" ></ div >
< p >
Free Tutorials, Millions of Articles, Live,
Online and Classroom Courses ,Frequent Coding
Competitions ,Webinars by Industry Experts,
Internship opportunities and Job Opportunities.
</ p >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/divider.html