Splitter Example Page

Splitter Examples

Below are just some examples of how you can utilise the options in the Splitter component to create new and interesting layouts for your website. In this example, the image on the right has been added as 'Background image' for the whole column which ensures it fills the whole column. Spacers have also been added above the Heading and below this Body Text to pad out the row and ensure the image on the right isn't cropped.

Creating a grid layout

You can separate your page into two columns, and repeat that format down the page with multiple Splitter components to create a grid layout. This allows you to put some text alongside an image like this.

Creating a grid layout (cont.)

This can be more effective if you alternate which side the text/image are on like this. It's important that when doing this you enable the option 'Reverse columns in mobile view' on your second Splitter instance. This ensures the content still alternates when the columns are stacked in mobile view.

Card Layouts

Card 1

Columns can have a variety of content on them. From Headings, body text, images or embedded content using the 'Partner' component

Card 2

There are options to change the background and text colours on individual columns to make them stand out on the page.

Card 3

If you combine this with the column margin options you can create a card-like layout using different colours to your site Theme.

Card 4

You can create up to 5 columns of content, and the columns will be divided equally across the page.