Virginia Tech®home

Text component

The text component features an editor tool that allows you to type content or place it from a clipboard using the copy/paste function in your browser.

From the full page view, text can be formatted for bold, italics, and underlined. To do so, select the text, and click the "A" icon in the toolbar to choose the format. 

Other features of the toolbar on the page view include alignment, bulleted format, and linking. 

The icons in black allow you to expand the toolbar for more formatting choices, close the toolbar (X), and approve the editing you've done (check mark).

Expanding the text box window gives you more formatting choices, which includes switching to HTML format and adjusting paragraph style.

The text component can be used anywhere on a page: the central body column, the right column (rail), or in the footer.

Pressing <return> in a text component, creates a new paragraph (using <p></p> tags); Pressing <shift><return> in a text component creates a line break (using the <br> tag). Note that line breaks can only occur inside of a paragraph (the <br> text will be wrapped in <p> tags).

Creating inline anchors for internal linking

There are times when the text on a page gets quite long and you want to create internal links to sections of text on a single page to minimize scrolling. This can be achieved by creating anchors within the page and then linking to those anchors.

1. Insert Text Component on the page
2. Go to full text editor view by clicking on the fullscreen/expand icon ()
3. Add text as needed, click on where you want the anchor placed
4. Click on the Anchor icon and give the anchor a name (eg., link1)
5. Select the text that you want linked to the anchor and click on the Link icon
6. For the link, type in #[anchor name] (eg., #link1)
7. Return to the in-place text editor by clicking on the exit fullscreen/shrink icon ()
8. Click on the check mark icon to save the text changes

    The text component features an editor tool that allows you to type content or place it from a clipboard using the copy/paste function in your browser.


    • Rich text editing, including text formatting, lists, hyperlinking, etc.
    • Direct access to the output HTML
    • Table building with UI

    Text editing

    The image may be edited in-line after choosing it from the dialog properties and clicking the pencil icon.

    Edit Options

    1. Text formatting
      • Bold
      • Italic
      • Underline
      • Subscript
      • Superscript
    2. Justify
      • Left
      • Center
      • Right
    3. Lists - create a bulleted or numbered list
      • Bullet List
      • Numbered List
      • Outdent
      • Indent
    4. Paragraph formats
      • Paragraph
      • Heading 2
      • Heading 3
      • Heading 4
      • Heading 5
      • Heading 6
      • Blockquote
      • Quote
    5. Hyperlink - becomes activated after typing in the component
      • Path - browse for a page or copy/paste a url
      • Alt text - if link needs accessible text
      • Target - where the link opens
        • Same Tab
        • New Tab
        • Parent Frame
        • Top Frame
      • Cancel
      • Confirm
    6. Unlink
    7. Fullscreen
      1. Table - build a table with UI
        • Columns
        • Width
        • Cell padding
        • Rows
        • Height
        • Cell spacing
        • Border
        • Header select
          • No header
          • First row
          • First column
          • First row and column
          • Caption
          • Cancel
          • Confirm
      2. Source edit - directly edit the HTML of the text component output
    8. Cancel
    9. Confirm

    Dialog Properties


    1. Component Title - Title of Component
    2. CSS Class - CSS class to be applied to the component

    CSS Classes

    • parbase
    • section
    • text
    • vt-text


    Loading player for /content/dam/ensemble_cms_vt_edu/videos/text.mp4...

    See a video demonstration of this component. Click the arrows to the right of the player bar to expand the window.