# Custom promo

A highly customizable promotional block with image, heading, styled highlights, descriptive text, disclaimers, and call-to-action buttons, ideal for marketing offers or announcements.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FIDHLr3OQzgoBiH2JSucM%2Fcustom-promo-block.gif?alt=media&#x26;token=6caec435-5c12-4db3-8352-b1d49de8c52b" alt=""><figcaption></figcaption></figure>

Each block within the promotion row can be customized with the following settings:

<table><thead><tr><th width="150.513671875">Settings</th><th width="179.29339599609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Main promo image.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Subheading</td><td align="center"><code>richtext</code></td><td>Optional subheading.</td></tr><tr><td>Subheading size</td><td align="center"><code>range</code></td><td>Controls subheading text size.</td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Main headline with optional italic highlighting.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Controls heading size.</td></tr><tr><td><strong>Highlight</strong></td><td align="center"></td><td></td></tr><tr><td>Type</td><td align="center"><code>select</code></td><td>Visual effect applied to italicized heading text.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Color for highlight or underline.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Color of highlighted/italicized text.</td></tr><tr><td>Description</td><td align="center"><code>text</code></td><td>Brief details about the promo.</td></tr><tr><td>Description size</td><td align="center"><code>range</code></td><td>Size of description text.</td></tr><tr><td>Disclaimer text</td><td align="center"><code>text</code></td><td>Optional fine print.</td></tr><tr><td>Disclaimer size</td><td align="center"><code>range</code></td><td>Size of disclaimer.</td></tr><tr><td><strong>Buttons</strong></td><td align="center"></td><td></td></tr><tr><td>Button text</td><td align="center"><code>text</code></td><td>Text for CTA button. Leave blank to link the entire block.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Button destination URL.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose 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>Choose button appearance: <code>Solid</code>, <code>Outline</code>, <code>Soft</code> and etc.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color for the promo block.</td></tr><tr><td>Overlay gradient</td><td align="center"><code>color_background</code></td><td>Gradient overlay. Overrides background if set.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>General text color.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code> and <code>Opacity overlay</code>.</td></tr></tbody></table>
