Semantic-UI Divider Variations
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:
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI vertical divider</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < h1 >w3wiki</ 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" > w3wiki < 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:
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI vertical divider</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < h1 >w3wiki</ h1 > < strong >Semantic-UI Divider Variations</ strong > < br >< br > < hr >< hr > < strong >Hidden Divider:</ strong > < br > < strong class = "ui header" >w3wiki</ 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" >Beginner 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" >w3wiki</ 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" >Beginner 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" > Beginner 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