Contents

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
3 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.

Part of a sentence can be bold, italic, struck through, or clickable without splitting the text across components. Select the words in Content Text and use the toolbar — or switch to Source and type the markers yourself. That is also the only way to emphasise a single word: Enclosing Tag applies to the whole component, so it can make all of the text a heading or none of it.

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.
  • A sentence that needs one word bold, or a phrase that should be a link.

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.
LinksLinksThe web addresses that some of the words in your text point at.

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".
  • To format or link part of the text, do it in Content Text. The toolbar handles bold, italic, strikethrough and links; Source shows the same thing as {b|bold}, {i|italic}, {s|struck}, and {1|pricing}. The link applies to the words, not to the whole heading or paragraph.

Where to go next