Line Component
The Line component provides an easy alternative for separating content blocks using a horizontal line, with optimized spacing between them, aimed at improving overall content legibility for end users.
Usage & Properties of the Line Component
Line Component in action
Line component : Standard Mode
lorem ipsum
---
Lorem ipsum
Layout component : Grid of 3 columns
:: layout{layout="grid-layout-3" font="serif-font-heading" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
Layout component : Grid of 4 columns
:: layout{layout="grid-layout-4" font="serif-font-heading" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
Layout component : Layout of large side and small side
:: layout{layout="layout-main-side" font="serif-font-heading" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
Layout component : Layout of large side and 2 small sides
:: layout{layout="layout-main-side-side" font="serif-font-heading" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
Layout component : Layout of small side and large side
:: layout{layout="layout-main-side-inverse" font="serif-font-heading" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
Layout component : Layout of large side no standard and small side no standard
:: layout{layout="layout-two-one" font="serif-font-heading" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
Layout component : Layout of large side and 2 small sides and large side
:: layout{layout="layout-main-side-side-main" font="serif-font-heading" align="align-left" box_type="container-full"}
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:- container{theme=""}
# title of section
Lorem ipsum dolor sit amet.
:- container
:: layout
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
