> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/content-and-media/text.md). # Text The Text component creates editable headings, paragraphs, taglines, labels, and other short text. It provides responsive typography, solid or gradient text colour, link states, decoration, effects, and semantic HTML tags. ### How to Use Text You’ll find Text under **Content** in the Components list. 1. Drag **Text** onto the page. 2. Edit the text directly on the page. 3. Choose the correct semantic Tag. 4. Set alignment, font, size, weight, spacing, line height, and colour. 5. Configure link or hover states where required. {% embed url="" %} ### Responsive Text Text size and many other controls can change by breakpoint. {% embed url="" %} ### Component Settings #### General **Tag** controls the rendered HTML and defaults to Paragraph. Options are Paragraph, Heading 1–6, Span, Div, or Custom. Custom reveals a Custom Tag field that defaults to `div`. The tag affects semantics and SEO rather than visual appearance. Use one Heading 1 for the page’s main subject, then maintain a logical heading order. **Text Align** offers Left, Centre, Right, or Justify and defaults to Left. **Font** defaults to Body and **Size** to Base. **Weight** ranges from Thin 100 to Black 900 and defaults to 400. **Spacing** offers Tighter through Widest and defaults to Normal. **Line Height** offers None, Tight, Snug, Normal, Relaxed, or Loose and defaults to Normal. **Italic** is off and **Text Shadow** defaults to None. **Case** offers None, Uppercase, Lowercase, Capitalise, or Small Caps and defaults to None. **Whitespace** * **None** — Applies no extra whitespace class. This is the default. * **Normal** — Collapses spaces and allows wrapping. * **Nowrap** — Prevents wrapping. * **Pre** — Preserves spaces and line breaks without wrapping. * **Pre Line** — Collapses spaces but preserves line breaks. * **Pre Wrap** — Preserves spaces and line breaks while allowing wrapping. * **Break Spaces** — Preserves spaces and lets them become wrapping opportunities. **Underline** offers No Underline, Underline, Overline, or Line Through. When enabled, Style offers Solid, Double, Dotted, Dashed, or Wavy. Underline also reveals Offset, which defaults to 1 pixel. Decoration Color defaults to Text 100 at 100% opacity.
Text General settings for semantic tag, alignment, font, size, weight, spacing, line height, and decoration

General settings control the Text component’s semantics and typography.

#### Color **Type** can be Static or Hover and defaults to Static. Hover lets Self, Parent, Container, Grid, Flex, or a Custom ID trigger the colour change, then provides Start and End states. **Style** can be Color, Image, or Gradient and defaults to Color. Solid text defaults to Text 50 at 100% opacity. The hover End colour defaults to Text 200. Gradient text can be Linear, Radial, or Conic. Set direction or position, interpolation, From and To colours, opacity, and stop positions. **Add Via** inserts an optional middle colour. Image text uses a resource with Position, Size, Repeat, and Fetch Priority controls. #### Links Use **State** to style Default, Hover, and Visited links independently. Each state provides Color, Font Weight, and Underline. Default links use Brand 500; Hover and Visited use Brand 800. Weight defaults to 400. ### Applying Tailwind CSS Classes Advanced classes can create one-off effects inside a Text component. {% embed url="" %} Examples from the video: ```css blur-sm hover:blur-sm transition hover:line-through inline-block rotate-[2deg] underline decoration-wavy underline-offset-[10px] ``` See the [Tailwind CSS documentation](https://tailwindcss.com/docs/) for available utilities. ### Discouraging Casual Text Copying This does not securely protect published text; it only discourages casual selection. 1. Add a `no-copy` class to the Text component. 2. Add this CSS in **Edit Page Code → CSS**:
A Text component with no-copy entered in its Classes field

Add the no-copy class to each Text component you want to affect.

```css .no-copy { user-select: none; -webkit-user-select: none; -ms-user-select: none; } ```
Page CSS containing a no-copy class that disables text selection

The no-copy class added to the page CSS.

Optionally add this in **Edit Page Code → JavaScript** to disable the page’s context menu: ```javascript document.addEventListener("contextmenu", e => e.preventDefault()); ```
Page JavaScript that prevents the browser context menu from opening

Optional JavaScript that disables right-click on the page.

### Accessibility Choose semantic tags for meaning, preserve a logical heading hierarchy, and keep text readable when responsive sizes, gradients, effects, or whitespace settings are applied. ### Related Components * [Typography](/elements-docs/using-elements/components/content-and-media/typography.md) — Styles long-form structured content. * [Markdown](/elements-docs/using-elements/components/content-and-media/markdown.md) — Writes formatted content using Markdown syntax. * [Button](/elements-docs/using-elements/components/navigation-and-interaction/button.md) — Creates a prominent linked action. | Common Control | Description | | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | | [Link](/elements-docs/using-elements/components/common-controls/link.md) | Link to a page, resource, anchor, email address, or website. | | [Layout](/elements-docs/using-elements/components/common-controls/layout.md) | Control positioning, stacking, visibility, overflow, and isolation. | | [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md) | Set width, height, and responsive size constraints. | | [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md) | Add responsive margin and padding. | | [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. | | [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md) | Apply colour, image, gradient, SVG, video, and hover backgrounds. | | [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md) | Choose what animates and set its timing curve, duration, and delay. | | [Effects](/elements-docs/using-elements/components/common-controls/effects.md) | Apply shadows, opacity, and hover effects. | | [Filters](/elements-docs/using-elements/components/common-controls/filters.md) | Apply blur, brightness, saturation, shadow, and backdrop effects. | | [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md) | Scale, rotate, move, and skew components. | | [Borders](/elements-docs/using-elements/components/common-controls/borders.md) | Set border style, colour, opacity, width, radius, and hover states. | | [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md) | Add CSS classes and IDs, or change supported HTML tags. | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/content-and-media/text.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.