Block Container Component
The Block Container component provides a straightforward and efficient solution for organizing your content according to your specific needs, without requiring complex page layouts. It enables the rapid creation of visually customizable content blocks in an optimal manner.
Usage & Properties of the Block Container 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
|
| 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
|
| background_mode |
primary-bg secondary-bg gris-bg
black-bg
|
| radius_type |
no-radius small-radius big-radius
full-radius
|
| border_type |
gris-border primary-border secondary-border
black-border
|
| shadow_type |
black-shadow primary-shadow secondary-shadow
|
| box_padding |
block-box no-box |
Block Container Component in action
Block Container component : Simple Mode
:: block{theme="orange-theme" font="sans-serif-font-heading" align="align-center" box_type="container-view" box_padding="no-box"}
# Title of section block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
:: block
Block Container component : Background Color Changes
:: block{theme="orange-theme" background_mode="primary-bg" font="sans-serif-font-heading" align="align-center" box_type="container-view"}
# Title of section block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
:: block
Block Container component : Radius Type Mode
:: block{theme="orange-theme" background_mode="gris-bg" radius_type="small-radius" font="sans-serif-font-heading" align="align-center" box_type="container-view"}
# Title of section block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
:: block
Block Container component : Border Type Changes
:: block{theme="blue-theme" background_mode="" border_type="primary-border" radius_type="small-radius" font="sans-serif-font-heading" align="align-center" box_type="container-view"}
# Title of section block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
:: block
Block Container component : Shadow Type Changes
:: block{theme="green-theme" background_mode="primary-bg" border_type="primary-border" shadow_type="primary-shadow" radius_type="small-radius" font="sans-serif-font-heading" align="align-center" box_type="container-view"}
# Title of section block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
:: block
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
