Semantic-UI Divider Variations Inverted Variant

Semantic-UI is a user interface library that is designed to create responsive and modern web applications. One of the features of Semantic-UI is the ability to create dividers with different variations. This article will focus on the inverted variant of the divider.

What is the inverted variant?

The inverted variant of the Semantic-UI divider is a variation that can be applied to any divider component. It changes the color of the divider to its opposite. For example, if the divider is originally black, it will become white when the inverted variant is applied.

How to use the inverted variant?

To use the inverted variant of the divider, you need to add the inverted class to the divider component. Here's an example:

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

You can also use the inverted variant with other variations, such as horizontal or vertical dividers. Here's an example:

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

Examples

Here are some examples of the inverted variant of the divider in action:

Example 1: Inverted vertical divider

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

This code will create a vertical divider with an inverted color.

Example 2: Inverted text divider

<div class="ui inverted section divider">Section</div>

This code will create a text divider with an inverted color.

Example 3: Inverted horizontal divider with text

<div class="ui horizontal inverted divider">Divider</div>

This code will create a horizontal divider with text and an inverted color.

Conclusion

The inverted variant of the Semantic-UI divider is a useful feature that allows you to create dividers with a unique and modern look. By using the inverted class, you can easily apply this variation to any divider component.