# Multi column

Broadcast's full-featured section to build rich, beautiful, custom layouts and promotions. The multi-column section is a perfect starting point for building creative promotions from one to many columns with rich blocks and animation. 

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/nvNFOvdRIfVmsW9qJPE4/multi-column-one.gif" alt="Gif showcasing Multi Column section and its animations."><figcaption><p><strong>Column width, shape and animation examples</strong></p></figcaption></figure>

### Example Designs

Sample layouts and styles when using the multi-column section.&#x20;

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FQL91GM1czmIXhwDtEOVV%2FUntitled%20image%20(18).png?alt=media&#x26;token=b989e281-5e7c-4797-bc40-f5e68f546d21" alt="Design of multi column section showcasing image blocks"><figcaption></figcaption></figure>

* Text blocks with large heading sizes:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FyCG8Ad6991yFFFvrQ4Qd%2FUntitled%20image%20(17).png?alt=media&#x26;token=03b0c2e5-c2ae-4351-a340-59dd4159f63c" alt="Design of multi column section showcasing text blocks"><figcaption></figcaption></figure>

* Menu block paired with an image block:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FX4053sfN9hxQbZ5LC4WD%2FUntitled%20image%20(15).png?alt=media&#x26;token=d62d61c1-ce88-43f4-9f88-c3a5175e1bc4" alt="Design of multi column section showcasing menu blocks"><figcaption></figcaption></figure>

* Two rows of text blocks with equal sizes:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FwGAFixo9TacQ6umu4sRh%2FUntitled%20image%20(16).png?alt=media&#x26;token=b1bea10b-4759-4608-b094-a4b1abaaf308" alt="Design of multi column section showcasing text blocks"><figcaption></figcaption></figure>

### Section settings

Experiment with various column widths, blocks, and image shapes. The multi-column section can be used throughout your site with different designs.&#x20;

<table><thead><tr><th width="152.7586669921875">Settings</th><th width="141.7569580078125" 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>Title for the section.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Controls the font size of the 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>Text</td><td align="center"><code>richtext</code></td><td>Rich text area below the heading.</td></tr><tr><td>Heading</td><td align="center"><code>select</code></td><td>Alignment for the heading text: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td>Text</td><td align="center"><code>select</code></td><td>Alignment for the description text: <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>Determines section width: <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>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Layout style on mobile: <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 color scheme for background and text.</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>Padding above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</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>Controls HTML tag <code>Automatic</code>, or <code>H1</code> - <code>H6</code> for SEO purposes.</td></tr></tbody></table>

Image blocks have shape options and can have text and a call-to-action button after the image:

<figure><img src="https://content.gitbook.com/content/sD7BEEDU3B7WiEJlN0F7/blobs/Oz93f52X3iMOVyGX6XiD/blobs%20and%20text.jpg" alt=""><figcaption><p><strong>Blob shapes include animation effects on hover. Heading and content text can be aligned differently.</strong></p></figcaption></figure>

### Video Overview

This video demonstrates different column layouts and also covers some of the section and block settings to achieve different styles:

{% embed url="<https://www.loom.com/share/6bca317404154fdeb4b6fb1f695ced8f?sid=921ea64c-55c7-489c-9914-7f2c5fc4ef5f>" %}
**Video walkthrough of the multicolumn section**
{% endembed %}

### See also

For two-column sections with different block types, Broadcast also includes:

{% content-ref url="../storytelling/image-with-text" %}
[image-with-text](https://broadcast.presidiocreative.com/sections/sections/storytelling/image-with-text)
{% endcontent-ref %}

{% content-ref url="custom-section" %}
[custom-section](https://broadcast.presidiocreative.com/sections/sections/advanced/custom-section)
{% endcontent-ref %}