skip to content
Contact
Home
Search

Accordion - Two Columns with Image

Good for:

  • A few short pieces of content that can be grouped together, preferably text only
  • Alternative to the zig zag if using multiple zig zags

Options

Page type used: Accordion Tab

Can only be used in this row option: Single column - Full width

Mobile:

  • Image is placed above the accordion and becomes a wide rectangle
  • The "accordion" part looks the same

Logic:

  • Only one tab can be opened at once
    • First one is open by default
  • Max number of items is 4

Specs:

  • Colour themes
    • White
    • Charcoal
    • Light grey (F2)
    • Grey (E7)
  • CTA options
  • Image
    • Placement: right or left
    • Size: 720x494px

Charcoal version

Left image

You should stick to paragraphs only since this version has limited space but you can do basic formatting.

Special notes: Hitting enter in this editor does a soft return (<br />) and hitting shift + enter does a hard return (<p>). Do not hit enter twice to mimic a hard return!

Bullet lists

This is what the "Blue link with arrow" option for the "Link style" looks like.
Blue link with arrow

This is what the "Red button" option for the "Link style" looks like.
Red button

Grey version

Right image

You should stick to paragraphs only since this version has limited space but you can do basic formatting.

Special notes: Hitting enter in this editor does a soft return (<br />) and hitting shift + enter does a hard return (<p>). Do not hit enter twice to mimic a hard return!

Bullet lists

This is what the "Blue link with arrow" option for the "Link style" looks like.
Blue link with arrow

This is what the "Red button" option for the "Link style" looks like.
Red button

White version

Optional sub title

This is what the "White link with arrow" option for the "Link style" looks like.
White link with arrow

This is what the "Solid White w/ Charcoal text (Charcoal hover bg)" option for the "Link style" looks like.
Solid white button

This is what the "Bordered White w/ White text (White hover bg)" option for the "Link style" looks like.

Bordered white button

Light grey version

This is what the "White link with arrow" option for the "Link style" looks like.
White link with arrow

This is what the "Solid White w/ Charcoal text (Charcoal hover bg)" option for the "Link style" looks like.
Solid white button

This is what the "Bordered White w/ White text (White hover bg)" option for the "Link style" looks like.

Bordered white button