Web components

monitor with cog wheel

Layout tools

An efficient way to arrange, align and distribute space among elements

Divider

  • No color options

In-page example

Divider screenshot example

Component

Horizontal divider

Horizontal divider

In-page example

Vertical Divider screenshot 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

Semantic content screenshot example
Semantic content options screenshot 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.