Dual Column Content
This group of components provides options for placing simple content side-by-side in two columns. Content options included in this group are text, images, videos, and quotes.
Dual columns allow you to display content side-by-side in two columns. This allows you to display a combination of text, images, videos and quotes.
Content combinations to choose from include [ZEP] Dual Column:
- (text/text)
- (text/quote)
- (image/text)
- (image/image)
- (image/video)
When to use a Dual Column:
Dual columns can be a good way to group two pieces of complementary content together on a desktop, and neatly stack them on mobile. You may consider pairing an image, video, or quote alongside a text column that is directly relevant to it.
A [ZEP] Dual Column: (text/text) component can also be used to display a text column alongside a video embed. Learn how to add a video embed.
As always, make sure:
- any images used are necessary, optimised and include alt text
- complex images include a text alternative on the page - the image/text component is ideal for this purpose
- videos include captions
When not to use a Dual Column
Dual columns look best when they are in alignment. If you have too much text to fit neatly into the column consider using a General Purpose Text Component instead.
Dual columns allow you to alternate the text column from left to right. Consider the position of the text columns. Alternating too many image/text and text/image columns could make the page difficult to skim-read on desktop.
With text in both columns
This configuration has space for an optional header at the start of each column. The text area in each column supports rich text styling, such as:
- bullet points
- bold text
- italics
- hyperlinks
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et malesuada ligula. Maecenas vel dui sed ex iaculis rhoncus. Nullam fermentum porta imperdiet. Donec vitae nisl lectus. Nunc eget purus non felis varius tristique. In cursus euismod pharetra.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et malesuada ligula. Maecenas vel dui sed ex iaculis rhoncus. Nullam fermentum porta imperdiet. Donec vitae nisl lectus. Nunc eget purus non felis varius tristique.
In cursus euismod pharetra. Phasellus libero purus, interdum nec sem vel, convallis fringilla nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et malesuada ligula.
Maecenas vel dui sed ex iaculis rhoncus. Nullam fermentum porta imperdiet. Donec vitae nisl lectus. Nunc eget purus non felis varius tristique.
In cursus euismod pharetra. Phasellus libero purus, interdum nec sem vel, convallis fringilla nisi.
With text and a quote
This configuration has space for an optional header at the start of this text column. This text area supports rich text styling, such as:
- bullet points
- bold text
- italics
- hyperlinks
The other column has space for a quote. This can be placed in the left-hand or the right-hand column.
Fair laughs the morn, and soft the zephyr blows, While proudly riding o'er the azure realm in gallant trim the gilded vessel goes.
With text and an image
This configuration has space for an optional header at the start of this text column. This text area supports rich text styling, such as:
- bullet points
- bold text
- italics
- hyperlinks
The other column has space for an image. The image should be 575x355 pixels.
Editors can choose whether the image is placed in the left-hand or the right-hand column.
Sorry, you need JavaScript to view this video