Fancy Columns in Rich Text

0001-01-01

Print Page
Share Page

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.

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.

There is more content in the middle column.

Content goes here.

Site Root