# Text

![](https://docs-assets.foxecom.app/documentation/ae4d0efa-b508-4e67-87da-3096d776cbe1.png)

Add a rich text block for paragraphs, headings, taglines, or other formatted copy. Choose a preset for consistent styling, or customize the typeface, size, color, and alignment.

## Content

<Table widths="30%">
  | Setting                          | Description                                                     | Options    |
  | -------------------------------- | --------------------------------------------------------------- | ---------- |
  | **Text**                         | Add your text with formatting such as bold, links, and lists.   | Enter text |
  | **Disable line break on mobile** | Keep manual line breaks from creating separate lines on mobile. | On / Off   |
</Table>

## Typography

<Table widths="30%">
  | Setting              | Description                                                   | Options                                                   |
  | -------------------- | ------------------------------------------------------------- | --------------------------------------------------------- |
  | **Preset**           | Choose a ready-made text style or create your own.            | Default / Paragraph / Subheading / Heading 1–6 / Custom   |
  | **Font**             | Choose the typeface when using a custom text style.           | Body / Heading                                            |
  | **Font weight**      | Set how bold the text appears when using a custom text style. | Select available font weights                             |
  | **Font size**        | Set the text size on desktop when using a custom text style.  | 10px - 100px                                              |
  | **Font size mobile** | Set the text size on mobile when using a custom text style.   | 10px - 100px                                              |
  | **Line height**      | Set the spacing between lines when using a custom text style. | Tight / Normal / Loose                                    |
  | **Text transform**   | Set the letter casing when using a custom text style.         | Inherit / As typed / Title Case / UPPER CASE / lower case |
  | **Color**            | Choose the text color.                                        | Text / Subtext / Gradient / Custom                        |
  | **Gradient color**   | Set the gradient when Color is set to Gradient.               | Choose color                                              |
  | **Custom**           | Choose an exact text color when Color is set to Custom.       | Choose color                                              |
</Table>

## Layout

<Table widths="30%">
  | Setting              | Description                                                    | Options               |
  | -------------------- | -------------------------------------------------------------- | --------------------- |
  | **Width**            | Set how much space the text block uses.                        | Fit / Fill            |
  | **Alignment**        | Align the text when Width is set to **Fill**.                  | Left / Center / Right |
  | **Width mobile**     | Set how much space the text block uses on mobile.              | Fit / Fill            |
  | **Alignment mobile** | Align the text on mobile when Width mobile is set to **Fill**. | Left / Center / Right |
</Table>

## Padding

<Table widths="30%">
  | Setting          | Description                                   | Options     |
  | ---------------- | --------------------------------------------- | ----------- |
  | **Top**          | Add space above the text.                     | 0px - 100px |
  | **Bottom**       | Add space below the text.                     | 0px - 100px |
  | **Left**         | Add space to the left of the text.            | 0px - 100px |
  | **Right**        | Add space to the right of the text.           | 0px - 100px |
  | **Mobile scale** | Scale down all four padding values on mobile. | 0px - 100px |
</Table>

## Animation

This group appears only when you enable animations in your theme settings.

<Table widths="30%">
  | Setting        | Description                                         | Options                                                       |
  | -------------- | --------------------------------------------------- | ------------------------------------------------------------- |
  | **Type**       | Choose how the text enters when it comes into view. | None / Fade in / Fade up / Slide in (left) / Slide in (right) |
  | **Delay (ms)** | Set how long to wait before the animation starts.   | 0ms - 2000ms                                                  |
</Table>

<Tabs>
  <Tab title="Fade In">
    <Video src="https://docs-assets.foxecom.app/documentation/d14ca926-760e-46f9-910d-4a7be67c9331.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Fade Up">
    k work
  </Tab>

  <Tab title="Fade Down">
    k work
  </Tab>

  <Tab title="Slide In (left)">
    <Video src="https://docs-assets.foxecom.app/documentation/e191c934-ab9e-476c-ba74-b9d0e441f47e.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Slide In (right)">
    <Video src="https://docs-assets.foxecom.app/documentation/31a89d20-6809-4b76-8eb5-c4eabdfab5d8.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>
</Tabs>

## Tips

* Use a preset for consistent styling across your store.
* Switch to Custom when you need a specific font, size, weight, or line height.
* Set Width to Fill to use left, center, or right alignment.
* Keep Disable line break on mobile turned off when manual line breaks are important to your layout.