> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/rich-text-scroll-cards.md).

# Rich text: Scroll cards

Pair a brand message with scrolling product cards, so your text stays in view while shoppers browse the products around it.

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

The **Rich text: Scroll cards** section places your caption, heading, text and button in a center column that stays in place on desktop while two staggered columns of image cards scroll past on either side. Cards linked to a product show a small product bar with the image, title, price and a Quick view button. On mobile, the text appears first, followed by the cards in a horizontal swipe row. Use it to tell your brand story while showcasing key products.

### 1. Our guide to set up a Rich text: Scroll cards section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Rich text: Scrolling cards** (that's its name in the *Add section* list).
* Pick a **Product** (and optionally a **Card image**) for each **Card** block.
* Click **Save.**
  {% endhint %}

### 2. Section settings

* **Color scheme:** Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
* **Content**
  * **Caption:** Small text shown above the heading.
  * **Heading:** The main title. Wrap words in \*asterisks\* to highlight them, for example: Talk about your \*brand\*.
  * **Heading size:** H1 / H2 / H3 / H4 / H5 / H6.
  * **Heading width:** Maximum width of the heading, 200–800px.
  * **Description:** Text shown below the heading.
  * **Content width:** Maximum width of the description, 200–800px.
  * **Button label:** Text on the button. Leave empty to hide the button.
  * **Button link:** Where the button goes.
  * **Use outline button style:** Shows an outline button instead of a solid one.
* **Position**
  * **Desktop content alignment:** Left / Center / Right.
  * **Mobile content alignment:** Left / Center / Right.
* **Cards**
  * **Card image ratio:** Adapt to image / Portrait / Square.
  * **Right column stagger:** How far the right column of cards is pushed down on desktop, 0–240px.
* **Highlight**
  * **Highlight style:** How the \*highlighted\* heading words are styled: None / Animated underline / Colored background / Text color.
  * **Highlight color:** Color used for the highlight.
* **Corner radius**
  * **Card:** Roundness of the card corners, 0–40px.
* **Section padding**
  * **Top padding:** 0–100px.
  * **Bottom padding:** 0–100px.

### 3. Card block settings

Each **Card** block adds one card. Cards alternate between the left and right columns on desktop. The section can have up to 8 cards.

* **Product:** The product shown on the card. Adds the product bar (image, title, price and Quick view button) and links the card image to the product page. Leave empty for an image-only card.
* **Card image:** Optional. Falls back to the product's featured image.
* **Image focal point:** Which part of the image stays visible when it's cropped: Center / Top / Bottom / Left / Right.

### 4. Tips

* Use an even number of cards so both columns end at a similar height.
* Upload a lifestyle **Card image** to make the cards feel less like a product grid. The product bar still shows the product's own image.
* Keep the center text short so it fits on screen while it stays in place on desktop.