A block of text.
Last reviewed: September 24, 2021
This component is blank by default.
Select the component then choose between Edit (pencil icon) or Configure (wrench icon) to add or edit the content. (For this component, both avenues provide the same functionality.) A Rich Text Editor supports basic formatting (bold, italics and bullets) as well as hyperlinks.
Pre-formatted text can be pasted in from other sources (e.g. a word processor or a non-UBCMS website). This allows inclusion of special characters, hyperlinks, and simple text formatting (e.g. bold, italics, underlining), while incompatible formatting will be suppressed (e.g. font colors, different font types or sizes, headings, lists, and images) and you will often see extra blank lines or spaces. Expect to do some cleanup before you are done.
For hyperlinks, the option is provided to open in new page. When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)
Also, an Alt Text field is provided, to provide additional labelling for hyperlinks.This can provide clarity, when link text is used repeatedly down the page or when it is not clear where the link is going (for accessibility reasons). If you choose to use this setting:
Learn how to use the Rich Text Editor to enhance text with hyperlinks, anchors and more.
Text components with the Rich Text Editor (e.g. Body Text, Intro Text) can hold hyperlinks in the body of their content that are built using the toolbar. These links have an additional setting for 'Alt text', which is intended to provide additional context for screen readers (and also shows as a mouseover tooltip).
Best practice: Use this Alt text setting when there are multiple links on a page that have the same link text but go to different target pages, or when the existing link text is ambiguous taken out of context (e.g. the link text is also the URL).
Best practice: Always write Alt text to be concise but clear:
Several components are specifically designed to display headings on your page, such as the Title component. Spoofing headings, such as by using bold text in a text component, or through custom CSS, is confusing, inconsistent, and most important, will fail accessibility review.
Best practice: Always create headings using the Title component or the title feature supplied in other components such as the Flex Module. (Do not use bold text formatting to give the visual appearance of headings.)
Best practice: Do not use Title components solely for visual results. They should be used as intentional section headings. Other components, such as the Callout, or the Pull Quote in the Related Content Container are intended to call special attention to short text segments.
Best practice: Do not choose a particular heading level merely because it 'looks better.'
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: