# Divider

## Basic #### Title (For Horizontal Divider) This is the text value shown within the divider line when the divider type is horizontal. This is helpful when the user wants to convey a message or information using the divider, without going for the extra widget to display the infomation. ## Interaction #### Disabled Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

#### Hide This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

## Layout #### Type | Property | Description | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Vertical | The divider acts like a visual separator element. Usually, it is used to divide the content into sections - or, to make a transition from one type of content to another type. | | Horizontal | The divider is displayed horizontally on the screen, from left to right. | ## Style #### Dashed The line is displayed as a dashed line, having breaks at regular intervals.

Property	Description
Color	Set the colour for the divider line.
Text	Set the colour of the title text. Recommended to set in contrast with the background.
Text Transform	This property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. MDN web docs
Text Decoration	This property sets the appearance of decorative lines on text. Types are "underline", "overline", "line-though", "overline-underline".
Text Size	Set the size of the text in px value - 12px
Text Weight	Increase or decrease the thickness of the font using the list of numbers from 100-800.
Font Family	Type the name of the font family. The reference to the list of font families can be found here: MDN web docs
Font Style	There are 3 types of styles that can be applied: "normal" - The text is shown normally, no style applied. "italic" - The text is cursive. "oblique" - A sloped version of the normal text.
Margin	This value is set in terms of "px" number which creates the space between the border and the content of the widget.
Padding	This value is set in terms of "px" number which creates the space between the border and outer elements.
Divider Radius	This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.
Divider Width	Set the thickness of the border of the widget using this value. It is defined using "px" terms.

#### Custom CSS Users can write a specific style using CSS syntax here and the style text will be applied to the widget when the program is loaded.