Column Block
Meet the Column Block — a component that can be displayed in flexible configurations: 50%, 33%, and 25%. This content block gives you the freedom to create engaging and diverse layouts.

Below, you’ll find sample configurations to help you explore the possibilities.

In some cases, the Column block can be used to build nice page intro

The Column Block is very flexible and should be used carefully. Select the proper colors matching the Wilhelmsen brand guidelines and use icons or imagery accordingly.

Don't mix items with images and icons in one row.

In one row, you can display up to four elements. If you want to add 6 or 8 elements, create two Column Blocks and manage the margins settings per block (Hide bottom/top margin).

Back to Demo page

Two columns title + text + CTA

Column item 50%

This column item is set to 50% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Column item 50% with CTA

This column item is set to 50% width and uses 'no background' colour, which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Call to action

Column item 50% colour

This column item is set to 50% width and uses Green light colour.
This column item is set to 50% width and uses Green light colour.

Call to action

Column item 50% with CTA

This column item is set to 50% width and uses Green light colour.

Call to action

Column item 50% with colour

This column item is set to 50% width and uses the Green dark colour.

Call to action

Column item 50% with CTA

This column item is set to 50% width and uses the Green colour.

Two columns with images

Column item 50% with image

This column item is set to 50% width and uses the Green light colour, and contains the image

Call to action

Column item 50% with image

This column item is set to 50% width and uses the Green light colour and contains the image.

Call to action

Three columns title + text

Column item 33% text only

This column item is set to 33% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Column item 33% text only

This column item is set to 33% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Column item 33% text only

This column item is set to 33% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Three columns colour

Column item 33% colour

This column item is set to 33% width and uses the Green dark background colour. You can add text, CTA and image or icon.

Learn more CTA 2 CTA 3

Column item 33% colour

This column item is set to 33% width and uses the Green background colour. You can add text, CTA and image or icon.

Learn more

Column item 33% colour

This column item is set to 33% width and uses the Green light background colour. You can add text, CTA and image or icon.

Learn more

Three columns with icons

Column item 33% with icon

This column item is set to 33% width and contains an icon. Please note that if you add both an icon and an image, the icon overrides the image and displays on the page.

Column item 33% with icon

This column item is set to 33% width and contains an icon. Please note that if you add both an icon and an image, the icon overrides the image and displays on the page.

Column item 33% with icon

This column item is set to 33% width and contains an icon. Please note that if you add both an icon and an image, the icon overrides the image and displays on the page.

Three columns images

Column item 33% with image

This column item is set to 33% width and contains an image. Please note that if you add both an icon and an image, the icon overrides the image and displays on the page.

Column item 33% with image

This column item is set to 33% width and contains an image. Please note that if you add both an icon and an image, the icon overrides the image and displays on the page.

Column item 33% with image

This column item is set to 33% width and contains an image. Please note that if you add both an icon and an image, the icon overrides the image and displays on the page.

Learn more

Four columns 25%

Plain column item 25%

This column item is set to 25% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Plain column item 25%

This column item is set to 25% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Plain column item 25%

This column item is set to 25% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Plain column item 25%

This column item is set to 25% width and uses 'no background colour', which is ‘Neutral Yellow’. Please note that when you select the "no background" option, there is no left and top margin.

Four columns 25% colours

Plain column item 25% colour

This column item is set to 25% width and uses the Green background colour. You can add text, CTA and image or icon.

Plain column item 25% colour

This column item is set to 25% width and uses the Green light background colour. You can add text, CTA and image or icon.

Plain column item 25% colour

This column item is set to 25% width and uses the Blue background colour. You can add text, CTA and image or icon.

Plain column item 25% colour

This column item is set to 25% width and uses the Turquoise background colour. You can add text, CTA and image or icon.