# Card images

![image](https://docs-assets.foxecom.app/sleek-theme/image_z0PkwQpX.png)

You can use this section to showcase bestseller products, and collections under banner image format, or even tell your brand's story through images.

## How to add Card images

<Hint type="success">

**Steps:**

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Card images.**
3. **Save.**

</Hint>

## How to edit Card images

### Section settings

#### Section header

Use the provided text fields to add a suitable **Heading, Subheading,** and **Text**.

* Leave them blank if you do not want to display them

You can also change the **Heading size** to Heading 1/ Heading 2/ Heading 3 and the **Text alignment** to Left/ Center to make the content look balanced on your website.

![image](https://docs-assets.foxecom.app/sleek-theme/image_JIEnZwFk.png)

#### Card settings

Select the card's **Image ratio** as:

* Adapt to image
* Square (1:1)
* Portrait (3:4)
* Landscape (4:3)

![image](https://docs-assets.foxecom.app/sleek-theme/image_3FNI700P.png)

#### Grid settings

Set the **Number of columns on desktop** view between 1-3 column(s), and choose your favorable **Column gap** as Extra large/ Large/Medium/Small/ Extra small/ None.

![image](https://docs-assets.foxecom.app/sleek-theme/image_zUwbd7Ha.png)

#### Carousel settings

You can **Enable the carousel on desktop** (when the number of collections added > the number of columns).

![image](https://docs-assets.foxecom.app/sleek-theme/image_zn8wthRt.png)

### Block settings

#### Image card

Select the **Color scheme** for the image card block.

![image](https://docs-assets.foxecom.app/sleek-theme/image_w9iXrNAv.png)

Click **Select image** to assign the image to the banner on the desktop and use the slider to change the **Image overlay opacity**.

![image](https://docs-assets.foxecom.app/sleek-theme/image_wB3lN6Pr.png)

Add some text for the banner’s **Heading, Subheading**, and **Description.**&#x20;

* Leave them blank if you do not want to display them.

You can also change the **Heading size** (Heading display 1/ Heading display 2/ Heading display 3/ Heading 1) and the **Description size** (Small/ Base size/ Large) to make your image card block look more balanced.

![image](https://docs-assets.foxecom.app/sleek-theme/image_2Ao3MNXg.png)

Add a call-to-action button that directs customers to the target page specified in the **Card link** field.

Add a **Label** then choose a **Button style**

* Primary button
* Secondary button
* Underline button

![image](https://docs-assets.foxecom.app/sleek-theme/image_hYSKYCt3.png)

![image](https://docs-assets.foxecom.app/sleek-theme/image_ig2ZPNQB.png)

Furthermore, you can also modify the look as well as the position of the content by changing these properties:

* **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
* **Content alignment**: Left/ Center/ Right
* **Content spacing**: Small/ Medium/ Large

![image](https://docs-assets.foxecom.app/sleek-theme/image_aL77J5KK.png)

### Mobile settings

Especially, if you want to display a different card image on the mobile device, you can insert another image to the **Image** field.

Moreover,  the block also allows you to change **Content position** and **Content alignment** on mobile.

![image](https://docs-assets.foxecom.app/sleek-theme/image_6LtKTtJV.png)