# Buttons list

The buttons list section allows you to create and customize a list of interactive buttons, either in a grid or carousel layout, with adjustable button styles, colors, and animations. This section can hold up to 12 buttons, and each button can have its own settings for text, links, images, and more.

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

### Section settings

<table><thead><tr><th width="225.974853515625">Settings</th><th width="177.08935546875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Title</td><td align="center"><code>text</code></td><td>Optional heading displayed above buttons.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Controls the heading size.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Desktop layout</td><td align="center"><code>select</code></td><td>Choose between a static <code>Grid</code> or interactive <code>Carousel</code> layout.</td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Aligns the section title: <code>Left</code> or <code>Center</code>.</td></tr><tr><td>Buttons per row on desktop</td><td align="center"><code>range</code></td><td>Sets number of buttons per row on desktop.</td></tr><tr><td>Buttons per row on mobile</td><td align="center"><code>select</code></td><td>Sets number of buttons per row on mobile: <code>1</code> or <code>2</code>.</td></tr><tr><td><strong>Button style</strong></td><td align="center"></td><td></td></tr><tr><td>Font</td><td align="center"><code>select</code></td><td>Selects the text style: <code>Heading</code>, <code>Body</code>, <code>Accent</code>, or <code>Button</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button shape options: <code>Square</code>, <code>Rounded</code>, or <code>Pill</code>.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjusts the size of button text.</td></tr><tr><td>Letter spacing</td><td align="center"><code>range</code></td><td>Controls spacing between letters.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Displays an arrow icon next to the button text if enabled.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Button background</td><td align="center"><code>color</code></td><td>Sets the background color for all buttons.</td></tr><tr><td>Button text</td><td align="center"><code>color</code></td><td>Sets the default text color for buttons.</td></tr><tr><td>Button border</td><td align="center"><code>color</code></td><td>Sets the border color for buttons.</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 color for non-button text like the section title.</td></tr><tr><td><strong>Mobile layout</strong></td><td align="center"></td><td></td></tr><tr><td>Enable slider</td><td align="center"><code>checkbox</code></td><td>Enables a horizontal scrolling slider on mobile for better UX.</td></tr><tr><td><strong>Animations</strong></td><td align="center"></td><td></td></tr><tr><td>Enable animations</td><td align="center"><code>checkbox</code></td><td>Applies entrance animations to buttons.</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>Choose between <code>Full-width padded</code> or standard <code>Page width</code>.</td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Controls top spacing.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Controls bottom spacing.</td></tr></tbody></table>


---

# 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://palo-alto.presidiocreative.com/sections/sections/text/buttons-list.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.