Text Component
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.
Toolbar Options
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
CSS Class
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.
half
Renders the text at 50% its usual width.
third
Renders the text at 33% its usual width.
two-thirds
Renders the text at 66% its usual width.
section-heading
For all Heading 2 elements within the Text component, renders the text in white with a grey background.
deptNews
Wraps the content of your Text component in a div with a shaded border. This style is recommended for important one time news/events.
intro
Increases the font size to 14px with a line-height of 21px. An ideal line length is less than 54 characters.
ruled
Places a grey border above the element (typically a paragraph or header)
ruled-below
Places a grey border below the element (typically a paragraph or header)
relatedTopics
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.
text-bg
Adds a red background to the text element and changes the text colour to white.
marginTop
Adds a margin above the component.
marginBottom
Adds a margin below the component.
galleryBox
To draw attention to a link on the page, renders the link like a button with white text and a brightly coloured background.