Column Control
Column Control can be used to define the layout of components or a page.
This page showcases the different Column Control component layout variations and configuration options.
Two Column layout (50:50)
Column 1 with image component
Luxury yachts at Sailing regatta. Sailing in the wind through the waves at the Sea.
Column 2 with Content Stream example
No results found
1
/
2 Column layout (33:66)
Column 1 with Link List component
Navigation
List of components:
Column 2 with Image component
Luxury yachts at Sailing regatta. Sailing in the wind through the waves at the Sea.
2 Column layout (66:33) with vertical separator
Column 1 with Teaser Stage component
Column 2 with Teaser Text component
3 Column layout (33:33:33)
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vitae congue mauris rhoncus aenean vel elit scelerisque. Mattis pellentesque id nibh tortor id aliquet.
Dui vivamus arcu felis bibendum ut tristique. Sed turpis tincidunt id aliquet risus feugiat in ante. Condimentum mattis pellentesque id nibh tortor id. Sit amet venenatis urna cursus eget nunc scelerisque.
Column 2
Column 3
4 Column layout (25:25:25:25) with vertical separator
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vitae congue mauris rhoncus aenean vel elit scelerisque. Mattis pellentesque id nibh tortor id aliquet.
Column 2
Column 3
Column 4
Container and background styles
When the Column Control component is placed inside a container, its styles are adapted to the background colour of the container.
Container with full page width and primary light background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vitae congue mauris rhoncus aenean vel elit scelerisque. Mattis pellentesque id nibh tortor id aliquet.
Container with background full page width and primary dark background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vitae congue mauris rhoncus aenean vel elit scelerisque. Mattis pellentesque id nibh tortor id aliquet.
Container with default width and secondary light background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vitae congue mauris rhoncus aenean vel elit scelerisque. Mattis pellentesque id nibh tortor id aliquet.
Container with default width and secondary dark background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Vitae congue mauris rhoncus aenean vel elit scelerisque. Mattis pellentesque id nibh tortor id aliquet.
