# Multi-column

The **Multi-column** section displays a row of text blocks with optional images and icons, great for highlighting your values, how your company works, or explaining key elements of your product.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKp0Gay0C51dQx65iRsk7%2Fmulti-column-botanical.png?alt=media&#x26;token=16b586ef-8a30-4ad5-bba1-9a88332900b3" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Multi-column**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Add column blocks

***

Add up to 8 **Columns** with a featured image, headings, and button. There are 2 types of column blocks: **Text column** and **Image with text column.**

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Column block** to open the settings.

   > Click **(+) Add block** to add a **Text column** or **Image with text column**.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under *Image*, click **Select image** to upload an image or icon to display at the top of the column.
3. Adjust the **Max width of text** of the Column text using the slider.

   > The width will need to be adjusted when there are two columns per row on desktop.

   > Experiment with this setting to find a clean visual shape for your text.
4. Enter text for the column **Heading**.
5. Enter **Text** as the main column content below the Heading.

   > We also recommend trying to keep the text for all Columns around the same length.
6. Select or paste a URL for the **Button Link**.
7. Change the **Button label**.

   > Leave this field blank to remove the button.
8. Select a **Button style**: either **Solid**, **Outline**, or **Text**.
9. Click **Save**.

</details>

`Click Column block to find settings`

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text width</mark></td><td>Set the maximum width of heading text as a percentage of the window width on a desktop.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text for the column block heading. We recommend using a short title.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to show beneath the heading.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the font size of the text from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter call-to-action text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text.</td></tr></tbody></table>

`Click Image with text column block to find settings`

<table><thead><tr><th width="238">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required dimensions. We recommend using the same shape and size of images for multiple columns with images.</td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the width of the image between <strong>50</strong> and <strong>100</strong> percent of the column width.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of your image to <strong>Square (1:1)</strong>, <strong>Landscape (3:2)</strong>, or <strong>Portrait (2:3)</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image <strong>Above text</strong> or <strong>Below text</strong></td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>Enter a URL or page to turn the image into a clickable link.</td></tr><tr><td><mark style="color:blue;">Small caption</mark></td><td>Enter text to show below the image.</td></tr></tbody></table>

### Change content alignment

***

Adjust the alignment and position of the headings and text within all columns.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Multi-column** section to open the section settings.
2. Set the **Content vertical alignment** and **Column alignment**.
3. Set the **Content background padding**: Applies to blocks when "Show background behind columns" is enabled.

</details>

### Change columns layout

***

In the section settings, you can adjust the overall layout of the column blocks.

* Choose the **number of columns** to display per row
* Change the amount of **spacing** between columns

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Multi-column** section to open the settings.
2. Change the **Number of columns** to display **`1 - 6`** columns for Desktop and **`1 - 2`** for Mobile.
3. Change the **Column spacing** to set the maximum pixel width (**`4 - 48`** px) between the left and right edges of columns.
4. Change the **row spacing** to set the maximum pixel width (**`4 - 48`** px) between the bottom and top of columns.
5. Click **Save**.

</details>

`Click Multi-column section to find settings`

<table><thead><tr><th width="211">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many items to display in each row: between 1 and 5 columns.</td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Increase or decrease the spacing between columns: from 4 to 48 pixels.</td></tr><tr><td><mark style="color:blue;">Row spacing</mark></td><td>Increase or decrease the spacing between rows: from 4 to 48 pixels.</td></tr></tbody></table>

## Show text box

***

Choose to display the content blocks with a box with a color background. You can show tiles with shadows or borders.

`Click Multi-column section to find settings`

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show text box</mark></td><td>Display all column blocks within a container.</td></tr><tr><td><mark style="color:blue;">Text box style</mark></td><td>Display boxes with a <strong>Soft drop shadow</strong>, <strong>Solid drop shadow</strong>, or <strong>Borders</strong> with different thicknesses.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Change the color scheme applied to the text box.<br><br>Use the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You can also select a <strong>custom color scheme.</strong> <a href="../../../theme-styles/colors#color-schemes">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Use custom colors for this section to override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for text within the text box.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the background of text box.</td></tr></tbody></table>

## Section header

***

The **Section header** appears above the section. Add a **heading**, **subheading**, and optional **button**.

`Click Multi-column section to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between <strong>400</strong> and <strong>1000</strong> px.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (<strong>Solid</strong>), Secondary button (<strong>Solid</strong>), Tertiary button (<strong>Outline</strong>), or <strong>Text</strong>.</td></tr></tbody></table>

***

> **Related links**
>
> [Grid](https://help.fluorescent.co/cornerstone/pages/theme-sections/grid)\
> [Icon list with columns](https://help.fluorescent.co/cornerstone/pages/theme-sections/icon-list-with-columns)\
> [Image with content](https://help.fluorescent.co/cornerstone/pages/theme-sections/media-with-content)\
> [Image with content split](https://help.fluorescent.co/cornerstone/pages/theme-sections/media-with-content-split)


---

# 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://help.fluorescent.co/cornerstone/pages/theme-sections/multi-column.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.