# Rich text

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

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FHEH6Q6ZJRgVV1BwOl155%2Frich-text-1A-tb.png?alt=media&#x26;token=74b44f8f-35ce-48ff-81dd-ef152834ea1d" alt=""><figcaption></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2Fs5Q6DyQdG97XfGPFqyGd%2Frich-text-1B-tb.png?alt=media&#x26;token=87a6a8e8-271c-49ac-b0ff-c57552154648" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FvMqErX0D8raJexbr2aqa%2Frich-text-1C-tb.png?alt=media&#x26;token=cee5dde5-2544-42a3-88e7-c49945423dbd" alt=""><figcaption></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FlsDLH8Lc9rhKSvgT7CJP%2Frich-text-1D-tb.png?alt=media&#x26;token=805eb0ae-7f56-4664-a7ce-a4752b0de2af" 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="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FkJ6rUO7TGNJRIE1AcexA%2Ffull-width.png?alt=media&#x26;token=bcf5796e-3931-4689-ac34-795584378cbe">full-width.png</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="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FH0YFSR5SvPbacTJwRfix%2Ffull-width-padded.png?alt=media&#x26;token=7abbf792-228d-4808-808d-afb6d569aec6">full-width-padded.png</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="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FKskyrvuQ2oTj7tsqqggV%2Fpage-width.png?alt=media&#x26;token=2bf5b977-36e7-497d-964b-639016795812">page-width.png</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="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2F23lEbj12B7JjIYHHRADj%2Fsection-padding-setting.png?alt=media&#x26;token=6365d5c7-3c9d-4c40-93e0-f16b8cc6d4b9" alt="" width="338"><figcaption></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FU1IrPgwZ9dlrnr9cNzSm%2Fsection-padding.png?alt=media&#x26;token=42dec7c8-59b2-4b2c-9741-75dfe0b4c7b4" 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="../anchor-id">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify [global button styles](https://help.fluorescent.co/section-studio/sections/global-styles/buttons)

[^2]: Modify [global style colors](https://help.fluorescent.co/section-studio/sections/global-styles/colors)

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