Layout Component
The Layout component is a core feature of Super Markdown, enabling the creation of dynamic page structures. It provides the flexibility to organize content in a customized, professional manner according to your specific needs.
Usage & Properties of the Layout Component
| Parametres |
Values |
| theme |
primary-theme orange-theme green-theme
red-theme blue-theme purple-theme gris-theme
olive-theme gold-theme strawberry-theme
indigo-theme sky-theme yellow-theme
|
| layout |
grid-layout-2 grid-layout-3 grid-layout-4
layout-main-side layout-main-side-side layout-main-side-inverse
layout-two-one
layout-main-side-side-main
|
| box_type |
mini-box container-box container-view
container-large container-full
|
| align |
align-left align-center align-right
align-justify
|
| font |
serif-font-heading serif-font-global sans-serif-font-heading
sans-serif-font-global
|
| count |
Custom Number Value of columns
|
Layout Component in action
Layout component : Grid of 2 columns
:: layout{layout="grid-layout-2" 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 : 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.
