# Media cards

***

The **Media cards** section displays a collection of visual cards (images or videos) with overlay content, ideal for showcasing categories, promotions, or featured content in a flexible layout.

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

<figure><img src="/files/7tcs4tn3IQqZ8itmohJf" alt=""><figcaption></figcaption></figure>

### 2. **Section settings**

<figure><img src="/files/wGUXAqEI5GakYzKbE6g5" alt=""><figcaption></figcaption></figure>

* **Layout**: Defines how cards are displayed:

{% tabs %}
{% tab title="Grid" %}
Cards are arranged in multiple rows and columns → suitable for structured layouts like collections or categories.

<figure><img src="/files/IpUvuU5CcRgnFqoZOWaB" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Slider" %}
Cards appear in a single horizontal row → users can scroll/slide through items for a more dynamic experience.

<figure><img src="/files/C58l6UTwXIshOsFMo6o1" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Heading:** Adda title to introduce the section.
* **Heading size:** Adjust the size of the heading to match visual hierarchy.
* **Desktop height:** Controls the height of all cards on desktop devices.
* **Mobile height:** Controls card height on mobile devices.
* **Adapt to first media size:** Uses the first card’s image ratio to define height for all cards.
* **Corner radius:** Adjusts how rounded the card corners appear (0 = sharp, 40 = fully rounded feel).

### 3. Card block settings:

<figure><img src="/files/nfZDnX3npXEURu1orUuT" alt=""><figcaption></figcaption></figure>

Each **Card block** represents one media item and supports both image and video with layered content.

* **Desktop width:** Defines how many cards fit per row on desktop.
* **Image:** Upload the main visual for the card.
* **Shopify-hosted video:** Upload a video file. *If both image and video are set, video will override the image.*
* **Media overlay opacity:** Adds a dark overlay on top of media.
* **Text settings**
  * **Heading:** Main title displayed on the card.
  * **Heading size:** Controls prominence of the title.
  * **Description:** Add supporting text for additional context.
  * **Desktop content position:** Precisely position content within the card.
* **Button settings**
  * **Button label & Button link:** Add label and assign link for the CTA button to drive action.
  * **Use outline button style:** Switch between solid and outline styles.
* **Color settings:** Customize overlay content colors independently from theme defaults:
  * **Heading color**
  * **Text color**
  * **Button label color**
  * **Button background color**
  * **Button outline color**
* **Mobile layout**
  * **Mobile content alignment:** Adjust alignment of text and buttons on mobile for better readability and spacing.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/media-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.