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.
<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.
<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.
<qtm-divider shape="rounded"></qtm-divider>
<qtm-divider shape="sharp"></qtm-divider>
API
qtm-divider
| 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 |