Skip to main content
Skip table of contents

Two column generic block and two column text and image block

image-20240923-081547.png

These versatile components display a range of paired content in side-by-side columns on desktop (or stacked left-over-right on mobile).

Please note that this covers two different components: the two column generic block and the two column text and image block. You will usually find the two column generic block most useful as it allows you to add a much wider variety of components and assemblies (either by adding assemblies or by embedding into each column’s body text).

Content you can choose from in the two column generic block:

Left column

  • Accordion

  • Form

  • Testimonial

  • Advice search box

  • Google map

  • Inline callout

  • Link box

  • Services finder

  • Share block

  • Simple rich text block

  • Standard CTA

  • Table

  • Video embed

  • Download banner

  • Images

Right column

  • Accordion

  • Form

  • Testimonial

  • Advice search box

  • Google map

  • Inline callout

  • Link box

  • Services finder

  • Share block

  • Simple rich text block

  • Standard CTA

  • Table

  • Video embed

  • Download banner

  • Images

Content you can choose from in the two column text and image block:

Background colour options: White, grey or black. You can also include a header that span both columns.

How to create either of these components

  1. Use Add entry and select Component – Two column text and image block or Component – Two column generic block

  2. Name – this is the system name seen in Contentful

  3. Header (optional) – this will display as an H2 that spans both columns if it's long enough. If you use either column for a header, such as with this example, it makes sense to leave the header blank:

    image-20240923-082822.png
  4. Left column assemblies – you can add assemblies here or embed them in the rich text editor

  5. Right column assemblies – you can add assemblies here or embed them in the rich text editor

  6. Left column text – add and format your text in the rich text editor (RTE) and embed other entries or images

  7. Right column text – as with the left column, add and format your text in the RTE and embed other entries or images. TIP: Aim to achieve a good visual balance between your columns. Ask the Central Digital UX team for feedback if you’d like help.

  8. Background colour – select white, grey or black

  9. Remove margin bottom – if your block has a grey or black background and it will sit directly above other non-white content, we suggest selecting ‘Yes’ to avoid an unsightly 40-pixel gap

  10. Once you’ve reviewed everything, click Publish

Any questions? Email Lindsay Foley in the Central Digital team.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.