Breadcrumbs

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.