> For the complete documentation index, see [llms.txt](https://docs.ultramarinastudios.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ultramarinastudios.com/sections/split-card.md). # 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](/sections/split-banner.md), 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](/theme-settings/appearance.md#card-border-radius). 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](/common-settings.md) * **Padding**: See [common settings](/common-settings.md) * **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:


Image banner	An image with theme blocks overlaid	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 10.58.42 am.jpg	Image banner
Video banner	A video with theme blocks overlaid	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 11.03.44 am.jpg	Video banner
Shoppable banner	An image or video with mini product blocks	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 11.09.04 am.jpg	Shoppable banner
Product banner	Features a single product	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.38.47 pm.jpg	Product banner
Collapsible content	Rich text with collapsible blocks	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.41.10 pm.jpg
Countdown timer	Rich text with a countdown timer block	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.42.34 pm.jpg
Newsletter	Rich text with a newsletter block	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.43.14 pm.jpg
Rich text	Simple rich text block	Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.44.13 pm.jpg

### 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


The split banner allows you to place any two blocks side by side without spacing on either side.	split-banner-gaia-2.webp
The richtext columns section allows you place blocks beside eachother without stretching the images to be equal height	Primavera Gloss 2025-04-02 at 5.07.07 pm.jpg

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.ultramarinastudios.com/sections/split-card.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.