# Icons row

In today's fast-paced digital world, grabbing your audience's attention is crucial. The Icons row section is your solution to make a lasting impression. With its flexible layout, customization options, and visually appealing icons, this section lets you convey key messages in a stylish and engaging way.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2Fg1zqWSKWfYZ2EyZkFKWo%2Ficons-row-section.gif?alt=media&#x26;token=6ca6660c-3e08-4543-b191-43d81aca2cda" alt=""><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="203.47265625">Settings</th><th width="176.078125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading text displayed above the icon grid.</td></tr><tr><td>Subheading text</td><td align="center"><code>richtext</code></td><td>Optional subheading with support for formatting.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Aligns content and icons: <code>Center</code>, <code>Left</code>,<code>Inline center</code>, or<code>Inline left</code>.</td></tr><tr><td>Icons per row</td><td align="center"><code>range</code></td><td>Sets how many icons appear in each row.</td></tr><tr><td>Icons width</td><td align="center"><code>range</code></td><td>Adjusts icon size in pixels. Max 40px on mobile.</td></tr><tr><td>Show vertical borders</td><td align="center"><code>checkbox</code></td><td>Toggles vertical borders between icons.</td></tr><tr><td>Show top border</td><td align="center"><code>checkbox</code></td><td>Toggles top border of the section.</td></tr><tr><td>Show bottom border</td><td align="center"><code>checkbox</code></td><td>Toggles bottom border of the section.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Scales the heading size.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Scales the icon text size.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Sets the text color inside the icon block.</td></tr><tr><td>Boxes</td><td align="center"><code>color</code></td><td>Background color for individual icon boxes.</td></tr><tr><td>Border</td><td align="center"><code>color</code></td><td>Border color for the section and icon boxes.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for optional call-to-action button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button will navigate to.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Visual style of the button color: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Button appearance: <code>Solid</code>, <code>Outline</code>, <code>Text</code>, <code>Solid with border</code> or <code>Soft</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Size of the button: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Sets icon layout on mobile: <code>Grid</code>, <code>Stacked</code>, or <code>Slider</code>.</td></tr><tr><td><strong>Section spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Controls section width: <code>Full width,</code> <code>Full width padded</code>, or <code>Page width</code>.</td></tr><tr><td>Padding top and bottom</td><td align="center"><code>range</code></td><td>Space above or below the section.</td></tr></tbody></table>
