> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/sections/sections/banners/banner-with-text-columns.md).

# Banner with text columns

Create an organized layout with up to four text columns and a prominent banner image, offering flexibility in appearance, colors, button styles, and image configurations for a visually appealing and content-rich webpage.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FhFqk6PN90thzunyI4Eyb%2Fbanner-with-text-columns.gif?alt=media&amp;token=2caee8e4-4802-42bb-af4a-0b57f1c1c441" alt=""><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="186.20916748046875">Settings</th><th width="136.54937744140625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Appearance</td><td align="center"><code>select</code></td><td>Determines the layout of text: Choose from <code>Row</code> and <code>Columns</code>.</td></tr><tr><td>Content alignment</td><td align="center"><code>select</code></td><td>Choose from: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Sets <code>Center</code> or <code>Left</code> text.</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Sets section height on desktop devices.</td></tr><tr><td>Enable mobile height</td><td align="center"><code>checkbox</code></td><td>Enables custom height settings for mobile devices.</td></tr><tr><td>Mobile height</td><td align="center"><code>select</code></td><td>Sets the section height for mobile when mobile height is enabled.</td></tr><tr><td><strong>Color</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><strong>Buttons</strong></td><td align="center"></td><td></td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Sets the color scheme for buttons.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Defines the button's visual style: <code>Solid</code>, <code>Outline</code>, <code>Soft</code>, etc.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Sets the size of the buttons: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Image control</strong></td><td align="center"></td><td></td></tr><tr><td>Show single image</td><td align="center"><code>checkbox</code></td><td>Displays only the image from the first column.</td></tr><tr><td><strong>Heading</strong></td><td align="center"></td><td></td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Adjusts the heading text size, expressed as a percentage.</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>Sets the overall content width: <code>Full width padded</code> or <code>Page width</code>.</td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Sets the top padding of the section.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Sets the bottom padding of the section.</td></tr></tbody></table>