Text

Words on the page — a heading, a paragraph, a label, or a button caption.

Where to find it
On the composer’s palette, labelled Text. Drag it onto the canvas to add one.
Its settings
2 of them, in the “Selected Component” section of the Modify drawer.
Provided by
RuleCMS, in @rulecms/source-components-react. Available to every team.

In plain English

The Text component is the one you will reach for most. Drag it onto the canvas and it becomes whatever kind of text you need: the main headline of a landing page, a paragraph of body copy, a short label above a form field.

It deliberately does very little on its own. It holds the words, and it holds the decision about what kind of element those words become — a heading, a paragraph, or a fragment inside a sentence. Everything about how the text looks is set on the column around it instead, under Typography.

That split is not an accident, and it is worth understanding because it saves a lot of repetitive work. Typography set on a column is inherited by every piece of text inside it, so you can set a font once on a section and have nine text components pick it up. Set the font on each component instead and you get the same result today and nine places to edit tomorrow.

When you would use it

  • Any headline, paragraph, caption, or label.
  • A short piece of copy that needs to read differently on phones than on desktop.

Its settings

These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.

SettingLabel in the drawerWhat it does
Content TextContent TextThe words a text component displays.
Enclosing TagEnclosing TagWhat kind of HTML element your text becomes — a heading, a paragraph, or a piece of inline text.

Watch out for

  • Always set an Enclosing Tag. Text with no tag is rendered bare, which tells search engines and screen readers nothing about whether it is a heading or a paragraph.
  • If padding or height appears to do nothing, the tag is probably an inline one such as span or em. Inline elements ignore vertical spacing — switch to a block tag like p or div.
  • Looking for font, size, weight, colour, or alignment? Those are column settings, not component settings. Open "Selected Column" and then "Typography".

Where to go next