> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/section-studio/sections/sections-overview/rich-text.md).

# 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)