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

<div class="qtm-divider qtm-small"></div>
<div class="qtm-divider qtm-medium"></div>
<div class="qtm-divider qtm-large"></div>

Orientation

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

Horizontal

Vertical

<div class="qtm-divider"></div>
<div class="qtm-divider qtm-vertical"></div>

Shape

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

Rounded

sharp

<div class="qtm-divider"></div>
<div class="qtm-divider qtm-sharp"></div>