Layout Component
Layout component: allows one to display other components within columns and rows.
Layout component options:
Additional classes:
Adding utility classes can change aspects of the layout component, like spacing around the component or its width.
Background colour: Set a background colour and opacity for said colour.
Background image: Set an image as a background for the component.
Layout component are made up of Column components, these can be set to a size and are where you add other components.
Column components options
Column size:
This sets the amount of space the column component will take up of the horizontal space available. The available space in this case will be the page's main content area width (excluding aside).
- 1/4: a quarter of the available space or 25%
- 1/3: a third of the available space or 33.33..%
- 1/2: a half of the available space or 50% or two quarters
- 2/3: two thirds of the available space or 66.666...%
- 3/4: three quarters of the available space or 75%
- 1: all available space or 100%
These can be mixed and matched to create columned layouts, like 3 columns (1/3​​​​​ x 3), 4 columns (1/4 x 4) or 2 columns (1/2 x 2). Note: if a Column component can't fit into the space left it will wrap to a new row, for example if you have one 2/3 sized Column component a 1/2 sized Column component will wrap to the next row as it won't fit in the 33.333...% that is left.
| |---- 66.666...% -----| |
| |---- 50% ----| |
Component list:
Here you can add components to the Column component, all components except the Layout component is available. You can add multiple components to a single Column component (column).
Advanced - Additional classes:
You can add classes to the Column component to change aspects of the cell, like spacing around or within, some classes affect components within the Column.
Examples of the Layout component in use.
Layout component with two columns of equal width
Below is a Layout component with two Column components each set to a Column size of 1/2 and with a WYSIWYG component assigned to it.
Col 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
- list items
- list items
- list items
- list items
- list items
- list items
Col 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
- list items
- list items
- list items
- list items
- list items
- list items
Layout component with three columns of equal width
Below is a Layout component with three Column components each set to a Column size of 1/3 and with a WYSIWYG component assigned to it.
Col 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
Col 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
Col 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
Layout component with two columns each of a different width
Below is a Layout component with two Column components.
The first is set to a Column size of 2/3 and with a Microview component assigned to it, set to display as a grid of cards.
The second is set to a Column size of 1/3 and has a WYSIWYG component assigned to it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
Layout component with a background colour
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales. Ut consectetur augue nisi, quis condimentum purus aliquet a. Nunc et ornare tellus. Aliquam eget vestibulum augue. Fusce tristique lacus eu ipsum scelerisque, vitae scelerisque magna tincidunt. Ut quis arcu non eros mollis iaculis. Aenean ipsum ipsum, feugiat ac ullamcorper eu, vestibulum vel risus. Vivamus vel porta felis, eu malesuada nibh. Aliquam erat volutpat. Nam in ullamcorper ligula. Mauris tincidunt tortor eget enim maximus, ut placerat quam sollicitudin.
This is a WYSIWYG
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis vitae lorem id finibus. Quisque leo ipsum, efficitur at tincidunt eu, ultricies et massa. Nullam pulvinar at massa at sodales.