Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    AEM Components

    Text Component

    The Text component includes a Rich Text Editor (RTE). It allows authors to add, edit, and format text content using common formatting options (e.g., headings, bold, italic, bullet points, numbered lists, inline links).

     

    Within the Text component, authors can add hyperlinks, anchor links, tables, and quotes. They can also use the Glossary Content Fragment to add a Popover definition for a term. Guides to all are linked below.

    Anchor Links user guide
    Table user guide

    Overview

    Component name: Text

    Authors who can use: all

    Templates/page types that can use component: all

    Required or optional: optional

    Authoring Fields

    Adding the Text component to the page

    Once on the desired page in Edit mode, add the Text by doing the following:

    Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Text” in the search bar, or scroll to the Text in the list. Double click to add to page.

    Option 2: On the left hand rail, navigate to the Components tab. Type “Text” in the search bar, or scroll to the Text in the list. Double click to add to page.

    Editing the Text component- full authoring dialog

    1. With the edit wrench, open the component.

    Text toolbar, featuring the edit wrench.

    2. The RTE opens as a modal. Click “Toggle Fullscreen” in the upper righthand corner for a wider view. Options are truncated in the modal view.

    Screenshot of authoring dialog, modal view. Figure A: Authoring dialog, modal view.
    Screenshot of authoring dialog, fullscreen view. Figure B: Authoring dialog, fullscreen view.

    Options within RTE (left to right) as seen in modal view

    1. Bold- bold text
    2. Italics- italicize text
    3. Underline- underline text
    4. Justify- left, center, or right align text
    5. Bullet point list- bullet point list, numbered list, left indent, right indent
    6. Subscript- add subscript to text
    7. Superscript- add superscript to text
    8. Hyperlink- add link to text, to link users to another page. See Hyperlinks user guide for more info.
      1.     Do not add alternative text to hyperlinks.
    9. Unlink- remove link from text
    10. Anchor link- add anchor links to the text, to link users to content on the current page. See Anchor Links user guide for more info.
    11. Magnifying glass- search for occurrences of a word or phrase in the RTE
    12. Find and replace- find and replace text, either in individual instances or all instances
    13. Spellcheck- underline misspelled words/grammar mistakes
    14. Special characters- add special characters to text
    15. Style: headline/body display size- denote parts of the text as either headline or body text, and size them as Small, Medium, Large. This does not impact heading level.
      1. Popover can be added here. See Popover user guide for more info.
    16. Paragraph/heading level- change the heading level (H-level) of the text, add a horizontal line, or add quote styling.
      1. Quotes can be added here. See Quote user guide for more info.
    17. Table- insert a table. Specify columns, rows, border, caption, and spacing, if desired. See Table user guide for more info.
    18. Paste as text- paste any copied text, in the style of the Text component (rather than the style as copied)
    19. Image- insert an image. Do not use; images should be added through the Image component to ensure accessibility. See Image user guide for more info.
    20. Undo- undo the last action
    21. Redo- redo the last action that was undone
    22. Paste as text- paste copied text

    Editing the Text component- abridged authoring dialog

    1. With the pencil wrench, open the component.

    Text toolbar, featuring the pencil icon.

    2. An abridged authoring dialog opens. Use the options to edit text directly on the page, without opening the authoring modal.

    Screenshot of the abridged authoring dialog toolbar, which includes a subset of the full authoring dialog options.

    3. If more options are needed, click the fullscreen icon (third from right) to open the full authoring modal.

    Accessibility

    • Hyperlinks should not contain alternative text. It is redundant for screen readers. Leave the alternative text field blank.

    Other Tips

    • Use the Emulator widget to test Text size on different devices.
    • Aim to pair styles from the same size group. For example, if using “Headline – Large” for a heading, pair it with “Body – Large” for the body text.