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

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FQ28sc481YQheAM5dyTPX%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%201.49.24%20pm.jpg?alt=media&#x26;token=352c6d21-1baf-4d07-b8da-4edf3e52768c" alt=""><figcaption><p>Split card with image banner and rich text blocks, border radius set to section</p></figcaption></figure>

It's very similar to [split banner](https://docs.ultramarinastudios.com/sections/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](https://docs.ultramarinastudios.com/theme-settings/appearance#card-border-radius).

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

<table><thead><tr><th>Look 1: Border radius on the section (default)</th><th>Look 2: Border radius on the blocks</th><th data-hidden></th></tr></thead><tbody><tr><td><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FdDfqLLVUSCfA5NjtGN7j%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-01%20at%2010.24.56%20pm.jpg?alt=media&#x26;token=9ce4dcca-5d64-4db4-b07d-2f5848127d6b" alt="" data-size="original"></td><td><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FolUw6UbMfSs12kKWW5NA%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-01%20at%2010.23.23%20pm.jpg?alt=media&#x26;token=6a5d6858-21e2-43bb-9f5c-54d25826815b" alt="" data-size="original"></td><td></td></tr><tr><td>Adds the border radius to the entire card, creating a split card look</td><td>Adds the border to blocks instead, allowing you to highlight one block in particular (keep the other block the same color as the background)</td><td></td></tr></tbody></table>

### 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](https://docs.ultramarinastudios.com/common-settings)
* **Padding**: See [common settings](https://docs.ultramarinastudios.com/common-settings)
* **Borders**:&#x20;
  * **Top/bottom border**
  * **Show split card borders**: Enable a border around the section  <mark style="background-color:green;">Available in version 1.1.0 and later</mark>

### Blocks

Mix and match two of the following blocks:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="../blocks/section-blocks/image-banner"><strong>Image banner</strong></a></td><td>An image with <a href="../blocks">theme blocks</a> overlaid</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FlG8Jq9OMiGO2NzlSewGw%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2010.58.42%20am.jpg?alt=media&#x26;token=80fa1ede-ed51-4a73-855f-0dd138c466ae">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 10.58.42 am.jpg</a></td><td><a href="../blocks/section-blocks/image-banner">image-banner</a></td></tr><tr><td><a href="../blocks/section-blocks/video-banner"><strong>Video banner</strong></a></td><td>A video with <a href="../blocks">theme blocks</a> overlaid</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FiTZTOCM65I18pSA6H6Ke%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2011.03.44%20am.jpg?alt=media&#x26;token=a51b8538-719f-45df-8ff6-7ad5b4ad25be">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 11.03.44 am.jpg</a></td><td><a href="../blocks/section-blocks/video-banner">video-banner</a></td></tr><tr><td><a href="../blocks/section-blocks/shoppable-banner"><strong>Shoppable banner</strong></a></td><td>An image or video with <a href="../blocks/mini-product">mini product</a> blocks</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FvSFMFl9HDVD1ESDL3cet%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2011.09.04%20am.jpg?alt=media&#x26;token=4ad4d09a-8adb-4426-a6eb-54a96e6950ea">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 11.09.04 am.jpg</a></td><td><a href="../blocks/section-blocks/shoppable-banner">shoppable-banner</a></td></tr><tr><td><a href="../blocks/section-blocks/product-banner"><strong>Product banner</strong></a></td><td>Features a single product</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FA4hlxP1mbVYWUrNplUam%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.38.47%20pm.jpg?alt=media&#x26;token=b090ef60-1fc8-4968-a497-924bacbd135e">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.38.47 pm.jpg</a></td><td><a href="../blocks/section-blocks/product-banner">product-banner</a></td></tr><tr><td><strong>Collapsible content</strong></td><td><a href="../blocks/section-blocks/rich-text">Rich text</a> with <a href="../blocks/collapsible">collapsible</a> blocks</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F82yyw2w9zhKTLapHnttX%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.41.10%20pm.jpg?alt=media&#x26;token=565202c3-e7c8-4a51-9f1a-42ba03248392">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.41.10 pm.jpg</a></td><td></td></tr><tr><td><strong>Countdown timer</strong></td><td><a href="../blocks/section-blocks/rich-text">Rich text</a> with a <a href="../blocks/section-blocks/countdown-timer">countdown timer</a> block</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FUeorFOA4Ng2MEsP3Os7j%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.42.34%20pm.jpg?alt=media&#x26;token=ebc63134-03cc-4830-acd5-8cf90b81db62">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.42.34 pm.jpg</a></td><td></td></tr><tr><td><strong>Newsletter</strong></td><td><a href="../blocks/section-blocks/rich-text">Rich text</a> with a <a href="../blocks/section-blocks/newsletter">newsletter</a> block</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FE0fZtQjshrMp3sYBS6Zf%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.43.14%20pm.jpg?alt=media&#x26;token=412361f4-abbe-4a28-a295-f4a214edf398">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.43.14 pm.jpg</a></td><td></td></tr><tr><td><a href="../blocks/section-blocks/rich-text"><strong>Rich text</strong></a></td><td>Simple <a href="../blocks/section-blocks/rich-text">rich text</a> block </td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Flg8KpZkqsxQ23XGQPmyF%2FPrimavera%20Precision%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%2012.44.13%20pm.jpg?alt=media&#x26;token=d71a9b69-6410-481d-9aa1-9204c0c4f822">Primavera Precision · Customize primavera-1-0-0 · Shopify 2025-04-03 at 12.44.13 pm.jpg</a></td><td></td></tr></tbody></table>

### Examples & inspiration

<div><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FcZLvBmNjBbLuRhVQHuKa%2Fsplit-card-composition.webp?alt=media&#x26;token=38d08728-d061-499a-bf0f-3225b642d1d8" alt=""><figcaption><p>The Composition preset features an image banner with a product banner, both with media padding offsetting the image from the border.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FY5TbIBarBGSXyx4ZqB3L%2Fsplit-card-gloss.webp?alt=media&#x26;token=691fe64a-b4ce-4db4-a0b2-3575ed0b01a8" alt=""><figcaption><p>The Gloss preset features a shoppable video banner with collapsible content.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fa03UXRsjB2lK9fGJ05ks%2Fsplit-card-primavera.webp?alt=media&#x26;token=ed836ca0-7849-488e-b1ab-3fe6c7e3eabb" alt=""><figcaption><p>The Primavera preset features an image banner with a rich text section.</p></figcaption></figure></div>

<div><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fs9lbv7b4FMzdMmYya6tX%2Fsplit-card-savoir-2.webp?alt=media&#x26;token=b754bf81-31e2-4d86-b1ac-c7558a5fcc0e" alt=""><figcaption><p>The Savoir preset features an image banner with a shoppable video banner.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FqN0LbNjqPuySF3kYGIL3%2Fsplit-card-gaia.webp?alt=media&#x26;token=15b5c51c-9219-4d5d-9521-73eab5bc290e" alt=""><figcaption><p>The Gaia preset features a rich text block with a shoppable banner.</p></figcaption></figure> <figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FnwmhP5IspCu59EtmhIL9%2Fsplit-card-savoir.webp?alt=media&#x26;token=3802a9e1-cff6-4480-bdb3-2461bf71e5ac" alt=""><figcaption><p>The Savoir preset features an image banner with a countdown timer.</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The<a href="split-banner"> split banner</a> allows you to place any two blocks side by side without spacing on either side.</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2F1bxqB4bTFJwm4ldiAi1h%2Fsplit-banner-gaia-2.webp?alt=media&#x26;token=c6b38cdf-1e27-4e6b-96af-da9cf347a933">split-banner-gaia-2.webp</a></td></tr><tr><td>The <a href="rich-text-columns">richtext columns </a>section allows you place blocks beside eachother without stretching the images to be equal height</td><td><a href="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FoM9OPJhFqDr8EPlFw6OK%2FPrimavera%20Gloss%202025-04-02%20at%205.07.07%20pm.jpg?alt=media&#x26;token=6b2fb78d-6a79-4140-8894-c15d3b7fd74c">Primavera Gloss 2025-04-02 at 5.07.07 pm.jpg</a></td></tr></tbody></table>