BANC

Dual Section Block

The Dual Section Block is a flexible two-column layout designed to display content alongside an image. It’s commonly used for highlighting key information, services, or processes with supporting visuals.

Content Editor Fields

Core Content

  • Heading

    • Description: The main title for the section.
    • Usage: Use this to clearly introduce the section's content.
    • Required: Optional but recommended.

  • Subheading

    • Description: A smaller heading beneath the main heading.
    • Usage: Used for supportive context or a brief summary.
    • Required: Optional.

  • Excerpt

    • Description: A paragraph of supporting text.
    • Usage: Use this area to elaborate on the heading/subheading.
    • Required: Optional.

  • Image

    • Description: Visual element that appears beside the content.
    • Usage: Typically a photo, illustration, or SVG relevant to the content.
    • Required: Optional but enhances layout.

CTA Buttons

  • CTAs
    • Description: One or more call-to-action buttons.
    • Fields:
      • Title: The label shown on the button.
      • URL: The destination link.
    • Usage: Useful for driving user interaction or directing to related pages.
    • Required: Optional. You can add multiple.

Style Options

  • Disposition

    • Description: Determines the layout direction.
    • Options:
      • dual-section_ltr: Content on the left, image on the right.
      • dual-section_rtl: Content on the right, image on the left.
    • Usage: Choose based on the flow you want.
    • Default: dual-section_ltr

  • Background Colour

    • Options:
      • white
      • grey
    • Usage: Use grey to visually break up sections or highlight importance.
    • Default: white

Output Summary

Renders a two-column layout with:

  • Content (headings, text, CTAs) on one side.
  • An image on the other.
  • Optional CTAs rendered as styled buttons.
  • Flexible layout orientation via the disposition setting.

Best For

  • Introducing services
  • Highlighting differentiators
  • Explaining processes
  • Showing value propositions visually
Preview with image:

dual-section with image

Editor preview:

dual-section acf