Divider

Dividers help you bring rhythm and clarity to your interfaces by separating elements. Separation of elements also comes in pair with the grouping of ones, thus a powerful 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

Loading API documentation...