Fancy Columns in Rich Text
0001-01-01
Two Columns Combination with Covering Images
- Layout 3 and Layout 2
- Second block reversed for stacking at small screen sizes
- Padding on columns containing text, no horizontal padding at small screen sizes
- Thick margin after the first block, no margin on small screen sizes
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Vivamus id felis vel nulla lobortis mollis. Duis eget neque gravida, eleifend enim at, lacinia neque. Sed ultrices convallis ipsum, eget aliquet felis aliquet in. In bibendum erat urna. Nunc eleifend bibendum augue sit amet luctus. Phasellus feugiat rhoncus turpis non malesuada. Praesent lobortis quam nisl. Curabitur vel eros vehicula, pharetra ipsum eget, rutrum est. Phasellus odio dui, interdum sit amet elementum ac, rhoncus a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec viverra ex sapien, et placerat urna malesuada sed. Cras id ligula est. Pellentesque non odio est. Maecenas in sem eu metus blandit euismod ut et elit. Aenean malesuada vehicula ipsum, in molestie ante auctor vel. Vestibulum eget facilisis leo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec viverra ex sapien, et placerat urna malesuada sed. Cras id ligula est. Pellentesque non odio est. Maecenas in sem eu metus blandit euismod ut et elit. Aenean malesuada vehicula ipsum, in molestie ante auctor vel. Vestibulum eget facilisis leo rhoncus a augue.
Curabitur vel eros vehicula
Pharetra ipsum eget, rutrum est. Phasellus odio dui, interdum sit amet elementum ac, rhoncus a augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec viverra ex sapien, et placerat urna malesuada sed. Cras id ligula est. Pellentesque non odio est. Maecenas in sem eu metus blandit euismod ut et elit. Aenean malesuada vehicula ipsum, in molestie ante auctor vel. Vestibulum eget facilisis leo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec viverra ex sapien, et placerat urna malesuada sed. Cras id ligula est. Pellentesque non odio est. Maecenas in sem eu metus blandit euismod ut et elit. Aenean malesuada vehicula ipsum, in molestie ante auctor vel. Vestibulum eget facilisis leo.
Duis eget neque gravida, eleifend enim at, lacinia neque. Sed ultrices convallis ipsum, eget aliquet felis aliquet in. In bibendum erat urna. Nunc eleifend bibendum augue sit amet luctus. Phasellus feugiat rhoncus turpis non malesuada. Praesent lobortis quam nisl. Curabitur vel eros vehicula, pharetra ipsum eget, rutrum est. Phasellus odio dui, interdum sit amet elementum ac, rhoncus a augue.
Five Columns with Background Styles
Darker, dark, mid, light, lighter.
Place content here.
Place more content here.
Even more content here.
Enough content yet?
This is the end, my friend.
Six Cols with Helper Classes
Content in the first column.
Content in the second column.
Third column content.
Fourth column content here.
The fifth column content.
Finally the sixth column.
Four Columns Sequence
cols-4 sequence align-items-center stack-medium
Stacking at different (manually configured) screen sizes except for the built-in stacking behavior is not yet supported well by the sequence layout.
Content in the first column, a bit more text.
Second step.
Third step is quite long, it'll span over multiple lines even at higher screen sizes. Is it working well enough?
Fourth step content here.
Sequence with Icons and Colors
Report is made
Report investigation
Outcome provided
Feedback recieved
Sequence with Icons and Colors, No Gutters
Report is made
Report investigation
Outcome provided
Feedback recieved
Six Columns Sequence with Icons and Colors
Issue encountered
Consider issue
Report is made
Report investigation
Outcome provided
Feedback recieved
Combination of Columns and Helper Classes
Content goes here.
Content goes here.
There is more content in the middle column.
Content goes here.