Split banners

Split banners is a preset of the flexible Section: two image cards side by side, each with a heading over a background image, and each one a link to a collection or page. Add it from Add section under Storytelling.

Because it is the Section underneath, the section itself has no settings unique to this preset. Everything that makes a split banner lives in the two cards inside it, which are Styled group blocks. See Sections, blocks, and groups for how the Section and its blocks fit together.

Add it

In the theme editor, open the page where you want the banners.
Click Add section and choose Split banners under Storytelling.
The section arrives with two cards already set up. Open each card in the section's blocks to add its image, heading, and link.

How it is built

The section is set to a Horizontal direction so the two cards sit in a row, and it stacks them on phones. Inside it are two Styled group blocks (the cards). Each card holds three blocks:

An Eyebrow (the small accent label above the heading).
An Accent text heading.
A Text block used as the link cue.

To change a card, open it in the section's blocks. The settings that make it a banner are on the Styled group card itself, covered next. To edit the wording, open the Eyebrow, Accent text, or Text block inside the card.

Each card (Styled group)

Each card is a Styled group, so it carries that block's full set of controls. The ones that shape a split banner:

Link: the collection or page the whole card opens. Because the link sits on the card, the entire image is clickable, not only the text. Open in new tab and Link label appear once you set a link. Link label is the accessible name screen readers announce for the card, so write it to describe the destination.
Background: set to Image, with the card's photo in Image. This is the picture behind the heading.
Overlay: set to Gradient, which darkens the lower part of the image so the heading stays readable over it. Adjust the gradient if your photo is lighter or darker than the default.
Corner radius and Shadow: the preset rounds the corners and adds a Subtle shadow to give each card its raised look.
Minimum height: set to a fixed height so both cards match. Change the desktop and mobile heights together to keep the row even.

To make the two cards different sizes instead of equal, adjust each card's height and the section's alignment, or swap the cards for a Proportional group if you want a width split.

Common settings

The Styled group cards also use the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. The section uses Color, Layout, Size, Padding, Margin, and Visibility. See Common section settings.

Tips

Keep the two cards' images close in tone and crop. Side by side, a mismatch in brightness or framing shows.
Set the same Minimum height on both cards so the row stays even. If one card's content is taller, the fixed height holds them level.
To turn this into three banners, copy one of the cards and drop it into the row. On phones the section stacks the cards. On desktop a third card narrows the row; to let it wrap to a new line instead, turn on Wrap elements when space is limited.