# Rich text

{% columns %}
{% column width="58.333333333333336%" %}
Use the **Rich text** section to add formatted text with buttons.

<div><figure><img src="/files/N8vk7QIVF91aKY46o0g2" alt=""><figcaption></figcaption></figure> <figure><img src="/files/W0EX1PwHX8u97l1qHnQV" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/Oq7epN0BaVTWPsaw9UlO" alt=""><figcaption></figcaption></figure> <figure><img src="/files/pMAE38LjMgyzCeIKd0XA" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column %}
{% hint style="info" %}
**Key features**

Create flexible layouts with promotional text and calls to action
{% endhint %}

{% hint style="info" %}
**Blocks**

Overline\
Heading\
Paragraph\
Button group
{% endhint %}

{% endcolumn %}
{% endcolumns %}

<h2 align="center">Section layout</h2>

***

You can set the **layout control** to use section-level or block-level layout settings. Using **block layout control** allows you to set the alignment and max width of each block.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Layout control</mark></td><td valign="top"><mark style="color:$info;">Section</mark><br><mark style="color:$info;">Block</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Alignment</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile alignment</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Max width</mark></td><td valign="top"><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Page width</mark><br><mark style="color:$info;">Custom</mark></td></tr></tbody></table>

<h2 align="center">Content blocks</h2>

***

You can customize the position and alignment of the content in the section settings.

Click **(+) Add block** to add headings, text, and buttons. Use the drag handles **`⋮⋮`** to re-order blocks.

<details>

<summary>Overline</summary>

<sub><mark style="color:$info;">Click overline block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Overline</mark></td><td valign="top">Add text for a small heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Overline size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Space below</mark></td><td valign="top"><mark style="color:$info;">0 - 27</mark></td></tr></tbody></table>

</details>

<details>

<summary>Heading</summary>

<sub><mark style="color:$info;">Click heading block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top">Add text for a heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Heading size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Space below</mark></td><td valign="top"><mark style="color:$info;">0 - 27</mark></td></tr></tbody></table>

</details>

<details>

<summary>Paragraph</summary>

<sub><mark style="color:$info;">Click paragraph block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Add multiple lines of text with rich formatting.</td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Space below</mark></td><td valign="top"><mark style="color:$info;">0 - 27</mark></td></tr></tbody></table>

</details>

<details>

<summary>Button group</summary>

Add a primary and secondary button under the text content. When both buttons are added, they will appear inline.

<sub><mark style="color:$info;">Click Button group block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top">Enter the URL for the button to link to.</td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top">Add text to the button.</td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Style</mark></a></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-2"><mark style="color:blue;">Color scheme</mark></a></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Full width</mark></td><td valign="top"><mark style="color:$info;">No</mark><br><mark style="color:$info;">All screen sizes</mark><br><mark style="color:$info;">Mobile only</mark></td></tr></tbody></table>

</details>

<h2 align="center">Section styles</h2>

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-view="cards"><thead><tr><th align="center"></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center"><strong>Full width</strong></td><td>Section background and content span the screen's full width.</td><td data-object-fit="contain"><a href="/files/KN0tRx1sNflpkl3O0DQO">/files/KN0tRx1sNflpkl3O0DQO</a></td></tr><tr><td align="center"><strong>Full width padded</strong></td><td>Section spans the screen's full width with some padding.</td><td data-object-fit="contain"><a href="/files/k8ye35eg8K9kPTyHbL79">/files/k8ye35eg8K9kPTyHbL79</a></td></tr><tr><td align="center"><strong>Page width</strong></td><td>Section background and content span the page width.</td><td data-object-fit="contain"><a href="/files/KXOwANhnH80jQD0D7bUN">/files/KXOwANhnH80jQD0D7bUN</a></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Border</mark></a></td><td><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<div><figure><img src="/files/GKReBH3EfMLtTnOAek62" alt="" width="338"><figcaption></figcaption></figure> <figure><img src="/files/y88BaLClRCPljbxnyu4N" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="/pages/XSI0ASdBWe3CkRGeWchj">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify [global button styles](/section-studio/sections/global-styles/buttons.md)

[^2]: Modify [global style colors](/section-studio/sections/global-styles/colors.md)

[^3]: Modify in [Global styles > Borders and styles > Large elements](/section-studio/sections/global-styles/borders-and-styles.md#large-elements)


---

# 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/section-studio/sections/sections-overview/rich-text.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.