The Text component is one of the most frequently used components in AEM. It allows you to insert and format text content, as well as add images and format tables.
There are several editing options for the Text component: In-Component Editing, Source Edit (HTML), and In-Place Editing.
When should it be used?
Use a text component whenever you need to insert any sort of text on your page.
Images from the Content Finder can also be dragged into the Text component to be added at the location of the cursor while in either editing mode (in-place or in-component). This is useful when an image needs to appear in-line with text (like an icon), or when an image needs to be linked to a page in a new window. Otherwise, use the image component.
Tables can be placed within Text Components. (For tables with alternating background colours, see zebra-striped tables.)
Tip: To help you decide on whether it is better to place all text in a single Text component, or separated into multple Text components, consider which portions of the content may be referenced in another AEM page or website.
If you need to break up a text component into smaller pieces, copy (right click, choose Copy) the entire text component and paste a copy of it, removing text content as needed from the two components. If you copy just a portion of text within the text component, any links in the text will be changed and not link correctly in the pasted version.
Source Edit (HTML)
If you wish to edit the HTML in the Text component, click on the very last option in the Rich Text Editing toolbar. This will toggle Source Edit.
Note: The Text component (in-component or source edit mode) is not appropriate for handling complex HTML functionality - it is only for displaying text, and in some cases, images or tables. If you wish to embed External Web Applications or other code, use the HTML component or the External Feed Component as necessary.
Find, Replace - Find a text fragment, or find and replace a text fragment
Undo, Redo - Undo an action, or redo an action
Bold (ctrl+b), Italic (ctrl+i), Underline (ctrl+u)
Subscript, Superscript - Display text as subscript or superscript
Align text: Left, Centre, Right - Options for text alignment
Hyperlink, Unlink - Add, edit or remove a hyperlink
Anchor - Add or remove an anchor
Bulleted List - Create a bulleted list
Numbered List - Create a numbered list
Outdent, Indent - Outdent or Indent text (can also be used on bulleted/numbered lists)
Spell Check - Highlights words that may have been misspelled within the text component
Table - Create a table
Special Characters - Insert special characters, i.e., © ® ™
Source Edit - Edit the HTML of the text component (only available with In-Component Editing)
Format - Specify whether a selection of text is a heading, or is paragraph text
The CSS Class field allows an author to provide an optional class name that will apply a style to the contents. See Styles section below for a list of styles that can be applied to a text component.
Example of Text component usage
This is an example of a text component. You can apply formatting such as bold, italic, and underline.
Bulleted items or numbered lists can be created:
- Bulleted item A
- Bulleted item B
- Numbered item
- Numbered item
This is a first level heading
This is a second level heading
This is a third level heading
To single space text, use
the "Shift + Return" keys.
The following styles can be applied using the CSS class field:
view text style samples
Renders the text at 50% its usual width.
Renders the text at 33% its usual width.
Renders the text at 66% its usual width.
For all Heading 2 elements within the Text component, renders the text in white with a grey background.
Wraps the content of your Text component in a div with a shaded border. This style is recommended for important one time news/events.
Increases the font size to 14px with a line-height of 21px. An ideal line length is less than 54 characters.
Places a grey border above the element (typically a paragraph or header)
Places a grey border below the element (typically a paragraph or header)
Can be applied to the List component or a list within a Text component. Creates a list of items separated by a dividing line with a grey bar on the left side to separate it from the main content area.
Adds a red background to the text element and changes the text colour to white.
Adds a margin above the component.
Adds a margin below the component.
To draw attention to a link on the page, renders the link like a button with white text and a brightly coloured background.