> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/test/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/test/theme-sections/feature-cards.md).

# Feature Cards

Feature cards combine images with text. They can not only add details such as product conditions and styles but also provide reviews. With eye-catching buttons, they facilitate further operations by users. Overall, they intuitively showcase product features, effectively guide user interaction, and enhance users' understanding and selection experience of products.

### (I) Layout

* **Columns**: Drag the slider to select the number of cards displayed per column, ranging from 1 to 6.
* **Column positioning**: Select the alignment of the content area, with two options: Left-aligned and Center-aligned.
* **Media asset size**: Select the display ratio of media images. There are multiple image ratios available; choose the corresponding ratio according to the desired visual effect.
* **Color scheme**: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

### (II) Padding

* **Top**: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.
* **Bottom**: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

### (III) Template Settings

* **Thickness**: Manually drag the slider to adjust the value, with a minimum of 0px and a maximum of 24px. When the value is greater than 0, a corresponding opacity option will appear.
* **Opacity**: Manually drag the slider to adjust the opacity of the thickness, with values ranging from 0% to 100%.
* **Reveal sections on scroll**
* **Horizontal space**: Manually slide to adjust the horizontal distance between each feature card, with a minimum distance of 4px and a maximum of 40px.
* **Page width**: Manually slide to adjust the page width, with a minimum display width of 1400px and a maximum of 1600px.

\
**Column**<br>

* **Image**: Upload or change the image. It is recommended to use high-resolution images.
* **Title**: Set a title.
* **Description**: Enter descriptive text for a brief introduction and explanation.
* **Link label**: Enter the text displayed on the button; the button will not be displayed if the content is empty.
* **Link**: Select the location the button jumps to; the button will be in a grayed-out state if left blank.
* **Outline style**: Enable this option to change the button style accordingly.