Skip to main content
🏠ComponentsDividerVersion: 2.0.0-beta.6

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
<qtm-divider size="small"></qtm-divider>
<qtm-divider size="medium"></qtm-divider>
<qtm-divider size="large"></qtm-divider>

Orientation

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

Horizontal
Vertical
<qtm-divider orientation="horizontal"></qtm-divider>
<qtm-divider orientation="vertical"></qtm-divider>

Shape

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

Rounded
sharp
<qtm-divider shape="rounded"></qtm-divider>
<qtm-divider shape="sharp"></qtm-divider>

API

qtm-divider

PropertyTypeDefaultDescription
classesstringlist 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