> 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/media-cards.md).

# Media cards

Show large image or video cards with text and buttons on top, in a slider or a grid, to showcase collections, categories and promotions.

***

The **Media cards** section shows large image or video cards, each with its own heading, description and button on top of the media. Use it to showcase collections, categories or campaigns, in a slider customers can browse or in a grid.

### 1. Our guide to set up a Media cards section:

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

* In the theme editor, click **Add section.**
* Locate **Media cards.**
* Click **Save.**
  {% endhint %}

The section is added with three **Card** blocks. You can add, reorder or remove cards.

### 2. Section settings

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2Fa4NjMHs9A5EzXF3TstKQ%2FScreenshot%202026-04-21%20at%202.57.51%E2%80%AFPM.png?alt=media&#x26;token=c30dc41f-9a3d-4a9e-82ec-d652ff55274b" alt="Media cards section settings"><figcaption></figcaption></figure>

* **Layout:** Slider / Grid.

{% tabs %}
{% tab title="Grid" %}
Cards wrap into rows. Set the width of each card with **Desktop width** in the **Card** block.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2Fhv2yFKPWD97papg03619%2FScreenshot%202026-04-21%20at%202.06.09%E2%80%AFPM.png?alt=media&#x26;token=a0231ffc-b19f-4c87-9e14-c941ee03240a" alt="Media cards in Grid layout"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Slider" %}
Cards sit in one row that customers can slide through, with previous and next buttons.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FRBGbncfZfQuq9eGgc5JB%2FScreenshot%202026-04-21%20at%202.07.45%E2%80%AFPM.png?alt=media&#x26;token=57cd6189-8599-4aa2-9dee-9e813e660f04" alt="Media cards in Slider layout"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Heading:** Add a title to introduce the section. Leave it blank to hide it.
* **Heading size:** 15–80px.
* **Desktop height:** 250px / 350px / 450px / 550px / 650px / 750px / 850px. The height of all cards on desktop.
* **Mobile height:** 150px / 250px / 350px / 450px / 550px / 650px / 750px. The height of all cards on mobile.
* **Adapt to first media size:** All cards use the shape of the first card's image or video. This overrides **Desktop height** and **Mobile height**.
* **Corner radius**
  * **Corner radius:** Rounds the corners of the cards, 0–40px.
* **Section padding**
  * **Top padding:** 0–100px.
  * **Bottom padding:** 0–100px.

### 3. Block settings

**Card block**

Each card shows one image or video with text on top.

* **Desktop width:** The width of the card on desktop, 20–100%. Only applies when **Layout** is set to **Grid**.
* **Image:** The card's image.
* **Shopify-hosted video:** A video uploaded to your Shopify files. It plays automatically, muted and on a loop. If you set both an image and a video, the video is shown.
* **Media overlay opacity:** Darkens the media so text stands out, 0–100%.
* **Text**
  * **Heading:** The card's title.
  * **Heading size:** 15–80px.
  * **Description:** Supporting text.
  * **Desktop content position:** Where the text sits on desktop: Top, Middle or Bottom, combined with Left, Center or Right.
* **Button**
  * **Button label:** Leave it blank to hide the button.
  * **Button link:** Where the button goes.
  * **Use outline button style:** Shows the button with an outline instead of a solid fill.
* **Colors**
  * **Heading** and **Text:** The colors of the heading and description.
  * **Button label**, **Button background** and **Button outline:** The colors of the button. **Button outline** applies when **Use outline button style** is on.
* **Mobile layout**
  * **Mobile content position:** Where the text sits on mobile: Top, Middle or Bottom, combined with Left, Center or Right.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F8mZTzz4T0qsGjqYsMDvM%2FScreenshot%202026-04-21%20at%202.18.29%E2%80%AFPM.png?alt=media&#x26;token=2d53fc1f-5433-44eb-990d-80bee559dad1" alt="Card block settings and result"><figcaption></figcaption></figure>

### 4. Tips

* In **Grid** layout, set **Desktop width** to 50% for two cards per row, or 100% for a full-width card. You can mix widths, for example 70% and 30%.
* Use images with the same shape for all cards, especially with **Adapt to first media size** on.
* Raise **Media overlay opacity** if the text is hard to read over bright images.