# Text columns with images

Quickly build columns with text and images for any promotion. Broadcast will automatically align the columns to look perfect. Add creative shape designs with animation for a captivating section.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FPvOdlG1a1InhL1fkbSkB%2Fimage-shape.gif?alt=media&#x26;token=a3d3044a-ee30-4a21-980a-19a3562a56ad" alt="Gif showing how the shape of each image changes when using the text columns with images section"><figcaption><p><strong>Animated shapes on hover</strong></p></figcaption></figure>

### Section settings

<table><thead><tr><th width="164.51214599609375">Settings</th><th width="169.55035400390625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Section heading text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls the size of the section heading: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Heading</td><td align="center"><code>select</code></td><td>Horizontal alignment of the section heading: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td>Text</td><td align="center"><code>select</code></td><td>Alignment for block text content: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Width of the section: <code>Full width padded</code> or <code>Normal</code>.</td></tr><tr><td>Columns</td><td align="center"><code>select</code></td><td>Vertical alignment of blocks: <code>Top</code> or <code>Centered</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Choose layout style: <code>Grid</code> or <code>Slider</code>.</td></tr><tr><td>Items per row</td><td align="center"><code>range</code></td><td>Number of columns per row (only applies to Grid layout). </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>Choose mobile layout: <code>1 item per row</code>, <code>2 items per row</code>, or <code>Slider</code>.</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>Choose a predefined color scheme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Top padding in pixels.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Bottom padding in pixels.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>HTML tag used for SEO: <code>Automatic</code> or <code>H1</code>-<code>H6</code>.</td></tr></tbody></table>

### Video Overview

This video demonstrates the section settings and how to add shapes to the images, plus more:

{% embed url="<https://www.loom.com/share/7a68ae5aba26447f9b992763e7b76950?sid=df0a74e9-39a5-43f6-8dba-4d3342eaf6a5>" %}
**Video overview of the text columns with images section in Broadcast**
{% endembed %}

* Each image shape is adjusted individually at the block level.&#x20;