Layout tools
An efficient way to arrange, align and distribute space among elements
Web components
Divider
- No color options
In-page example
Component
Horizontal divider
Horizontal divider
In-page example
Component
Vertical divider
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.
Vertical divider
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.
Vertical divider
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.
Vertical divider
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.
Layout tool
- 12 column grid
- Can update max-wdith
- Ability to invert content
- Ability to change column background color, entire layout background color, opacity, and add background image
- Option to remove top spacing, padding and column spacing, add border between and below columns, add bottom anchored content
- Ability to set minimum height, adjust column alignment (center, left, right), adjust content alignment (top, middle, bottom)
- Ability to reverse column order (valid for 2 columns only)
- Option to maintain column layout until small view
Component
Column 1
Column 2
Column 3
Column 4
Column 5
-
Column 1
-
Column 2
-
Column 3
-
Column 4
Reference
- Enter page url then select content-par followed by component to be referenced
Component
Welcome to the Digital Experience Hub
Your guide to creating engaging and impactful digital experiences
Semantic content
- Option to wrap components within article, aside and, section elements
In-page example
Component
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.