Page Loading

50:50 panel

The 50:50 panel allows content to sit alongside each other horizontally. You can use other components within a 50:50. 

Here's an example of a 50:50

This version of the 50:50 has text on the left, and an image on the right. The text on the left can include bullet points, links and buttons. You can also build 50:50s using other components like videos, icons, cards, stats and quotes. 

We don't usually use 50:50 panels on pages with secondary navigation because it looks a bit squashed. We've included some extra examples at the bottom of this page to show how they look on a full width page, and also to show how flexible this style of panel is. 

How to use the 50:50 panel

Use a 50:50 panel to break up your content, group related information and introduce visual interest. 50:50 panels are made up of a left and right container which can contain components such as text, button, image, video, quote or stat.

On tablet and mobile, the 50:50 panel rearranges itself to sit vertically instead of horizontally.  

When using a 50:50 panel, you should:

  • Make sure the content in both containers relates to and supports each other  
  • Keep text on the same side throughout the page, so users don’t have to ‘zig zag’ down the page
  • Set the span wider than plain text – usually between 10 and 12 columns. By default, 50:50 panels are set to span 6 columns on each side, but you can adjust this so that one side is wider than the other.
  • Not use accordions or tabs in either container
  • Not use a 50:50 on a page that has secondary navigation because the reduced span means there may not be enough space to display both containers properly  

Adding a 50:50 in the CMS

You should use a panel template when adding a 50:50. There are a number of 50:50 templates that include different components such as an image, video, stat or CTA. You can add or remove components as you need. If you don't use a template, you'll need to add two containers to a panel and at the panel level set these to appear horizontal. 

50:50 modifier rules

  • Background: default (white) or ‘background’ (grey)
  • Grid span: the default is 6 per container, but this can be adjusted so one side is wider than the other 
  • Padding: Extra left and right padding might be needed between the containers on desktop, and extra top and bottom padding top and bottom padding on mobile and tablet.
  • Alignment: default  

Accessibility

When adding components to a 50:50, follow the accessibility guidance for those components.  

Making sure there’s enough padding between containers will make it easier for users to digest the information.  

Evidence and research

According to eye tracking research done by the Nielsen Norman Group (NN/g), pages that contain decorative images should have content aligned rather than zig zagged. This is because “the zigzag layout is less predictable, making it difficult to scan around image obstacles”. They did note that when the images are informative – such as graphics or helpful screenshots of a product or service – both layouts worked equally well. Since most of the images used on our websites are decorative, we recommend sticking to an aligned layout where text always appears on the same side on a page.  

Read more about aligned v zig zag layouts from NN/g  opens in a new window  

Additional 50:50 examples

To show how flexible the 50:50 panel is, we've included additional examples that include different components and different spans.

Here's an example of a 50:50

With valuable business opportunities and attractive investment returns, Scotland has the perfect blend of talent, innovation, financial and renewable resources to help your business prosper. A green and sustainable choice for foreign direct investment (FDI) and trade.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dolor tincidunt, viverra nunc et, tincidunt mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse eu risus sit amet sapien faucibus bibendum. Maecenas ac sagittis libero. Sed quis nunc hendrerit, elementum tortor nec, rhoncus mauris. 

  • You could use this card as a CTA

    It's a good alternative to a full width CTA panel, and doesn't interrupt the flow of content. If users aren't ready yet, they can keep reading.

The alt attribute should be removed

This 50:50 panel is introduced by a heading

Here's a title to introduce this piece of information

This panel uses multiple 50:50 containers to show information next to icons. The left container has a span of 2 to give more room to the text. Here are a few suggestions for using this styling:

  • This styling is ideal for introducing a group of related information, such as benefits, features or facts
  • You can use longer paragraphs like this one with bullets, links and other text formatting
  • You could also just use short sentences to introduce key facts
  • Make sure the icons you're using are relevant to the text

Here's the next bit of information

Everyone loves lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur purus massa, aliquet eget ipsum vitae, scelerisque rhoncus sem. Proin nec tristique leo, sed fringilla nibh. Sed sit amet dui sem. Quisque urna lectus, scelerisque ut tortor eu, iaculis tempor orci. Mauris a auctor eros, tempor pellentesque felis. Fusce a auctor justo. Nulla facilisi. Sed pulvinar libero a leo consectetur, vitae lacinia mauris porttitor. Vivamus non cursus tortor, eu ornare nunc.

Here's the last section about the next thing

Donec vel imperdiet odio. Sed nibh arcu, ullamcorper tincidunt mollis vitae, ullamcorper sed metus. Donec viverra mattis urna, vel elementum quam ultrices vel. Vestibulum vestibulum ac lorem eget euismod. Quisque in euismod nibh, eget pulvinar ipsum. Sed tincidunt pharetra lorem id egestas. Sed turpis ipsum, sodales eget nisi in, fermentum scelerisque mi. Pellentesque dignissim auctor massa sit amet ullamcorper.

Vestibulum eget semper lectus, vitae dictum dolor. Mauris porta euismod neque, a euismod ex convallis quis. Nunc cursus porttitor lorem non congue. Nunc sed imperdiet sapien, quis luctus purus.

Here's another 50:50 example

We don't often use lore ipsum, but it's useful in this context. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu dolor tincidunt, viverra nunc et, tincidunt mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

This 50:50 can also contain bullet points:

  • Like this one
  • And here's another one that's slightly longer
  • And one more to fill the space

This image might need a caption

Not all 50:50s have to use two different components

You can use text components on both sides if you're looking for a way to break up large amounts of text. This is especially handy for short bullet points which don't take up a full line of text anyway. Here's an example from the live SDI site:

What are Scotland’s top skills?

Scotland's graduates have degrees in a variety of subjects, including:

  • Sciences: biological, physical, chemical and mathematical
  • Subjects allied to medicine
  • Business
  • Engineering and technology
  • Creative arts and design, including games development
  • Computer science, including data science
  • Education
  • Law
  • Languages

Scotland's thriving industries include:

See all industries 

  • This gradient panel is also a 50:50

    It's confusing to create from scratch, with multiple containers inside other containers. You can use a template to make sure you get it right. There's also an option for a gradient panel that isn't split 50:50.

    The gradient panel highlights information and adds visual interest. Think carefully about why you're using it rather than a standard text panel. Too many gradient panels on a page can be overwhelming.

    In the other half of the gradient panel, you might add more detailed information. 

    This could be a list of bullet points, a longer paragraph, or a series of paragraphs with sub-headings.