Divider

Dividers help you bring rythm and clarity to your interfaces by separating elements. Separation of elements also comes in pair with the grouping of ones, thus a powerfull tool to raise your information architecture.

Sizes

The divider comes in three sizes. By default, the divider comes in medium size.

Small

Medium

Large

<Divider size="small"></Divider>
<Divider size="medium"></Divider>
<Divider size="large"></Divider>

Orientation

The divider can be used in two main directions: horizontal and vertical. By default, the divider comes in horizontal orientation.

Horizontal

Vertical

<Divider orientation="horizontal"></Divider>
<Divider orientation="vertical"></Divider>

Shape

The divider can be used in two main shapes: rounded and sharp. By default, the divider has a rounded border.

Rounded

sharp

<Divider shape="rounded"></Divider>
<Divider shape="sharp"></Divider>

Event handling

Not applicable. The Divider component is a static visual element and does not support any event handlers.

API

QtmDivider

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
orientation	"horizontal" | "vertical"	'horizontal'	The orientation of the divider
shape	"rounded" | "sharp"	'rounded'	The shape of the divider
size	"large" | "medium" | "small"	'medium'	The size of the divider