Split card

This is one of the most flexible sections in the theme, allowing you to put two types of section blocks side by side in order to create a split card effect.

Split card with image banner and rich text blocks, border radius set to section

It's very similar to split banner, except it can only be padded or page width, never full bleed. This enables you to create some interesting looks, especially if you have rounded card borders.

If so, you can use the border radius setting to achieve the following looks:

Look 1: Border radius on the section (default)
Look 2: Border radius on the blocks

Adds the border radius to the entire card, creating a split card look

Adds the border to blocks instead, allowing you to highlight one block in particular (keep the other block the same color as the background)

Section settings

  • Container type: Choose between padded or page width

  • Border radius: Create between section or blocks to create looks 1 or 2 (see above)

  • Colors: See common settings

  • Padding: See common settings

  • Borders:

    • Top/bottom border

    • Show split card borders: Enable a border around the section Available in version 1.1.0 and later

Blocks

Mix and match two of the following blocks:

Cover

Collapsible content

Cover

Countdown timer

Cover

Newsletter

Rich text with a newsletter block

Cover

Simple rich text block

Examples & inspiration

The Composition preset features an image banner with a product banner, both with media padding offsetting the image from the border.
The Gloss preset features a shoppable video banner with collapsible content.
The Primavera preset features an image banner with a rich text section.
The Savoir preset features an image banner with a shoppable video banner.
The Gaia preset features a rich text block with a shoppable banner.
The Savoir preset features an image banner with a countdown timer.

Similar sections

Cover

The split banner allows you to place any two blocks side by side without spacing on either side.

Cover

The richtext columns section allows you place blocks beside eachother without stretching the images to be equal height

Last updated

Was this helpful?