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.
<div class="ui Divider-Variation divider"> ... </div>
Below examples illustrate the Semantic-UI Divider Variations: