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

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

Orientation

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

Horizontal

Vertical

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

Shape

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

Rounded

sharp

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

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