Transforming UB’s digital communications.
Title Component
A heading.
On this page:
Last reviewed: March 13, 2023
Accessibility
- An H1 is required on every page
- Headings must be hierarchical
- Link text should be meaningful.
- Use the Open in New Window setting sparingly.
Using This Component
By default, this component displays the page's actual Title, as set in Properties, and is automatically updated if that is changed.
As a best practice, and to meet accessibility guidelines, a Heading 1 titles is required on every page.
- For special cases such as home pages, where a large heading is undesirable, use the Properties setting 'Use Site Title as H1' to satisfy this rules. (This adjustment is not permitted on shared content pages.)
In general, Titles must be used hierarchically; e.g.,
- Place a single Heading 1 at the top of a page.
- As needed, break up the content that follows with Heading 2 sub-headings.
- As needed, break up the Heading 2 sections with Heading 3 sub-headings.
Edit (pencil icon)
The pencil icon provides in-place access to change the heading title. When done, click anywhere off the component to save your changes, or push the Escape key to cancel.
Configure - Main Settings
The component opened for configuring the settings.
The wrench icon provides access to change all settings.
By default, the Title starts as a Heading 1 and is blank.
Title - Edit this field to change the text displayed in the heading.
- The field must either be completely blank or have one or more alphanumeric characters.
- If left blank, it will automatically display the page title set in Page Properties.
- Changes made here have no impact on the page tite set in Properties.
Examples of regular Title styles.
Type/Size - Select from these options. Font color and size is pre-set (see examples at right).
- Heading 1 - Default value. Usually used once to display the primary page title.
- Heading 2 - Use for your secondary headings.
- Heading 2: Section Bar - Displays a special, full-width bar, with additional color and styling.
- Developed for home or one-column pages to provide a clear break on the page.
- When chosen, these additional options are revealed:
- Section Bar Background Color: UB Blue | Gray | Harriman Blue
- Full-Screen Width (only applies to 1-column pages).
- Note: may overlap with Photos set to Float. Adjust component order or use a Divider to keep them apart.
Examples of the H2 Section Bar in use.
- Heading 3 - Use for your tertiary headings.
- Heading 4 - Use for your quaternary headings.
- Heading 5 - Handy in sidebars and mimics the Flex Module heading.
H5 mimics the Flex Module heading
When the Flex Module or a carousel do not quite meet your needs, the Heading 5 option allows authors to create the look of a module using other components with the combination still matching other modules on the page.
Whitespace above title - Adjust the blank space between the preceding content and this component by specifying a number of pixels. (e:g. ‘5’).
Whitespace below title - Adjust the blank space that follows this component before the next component by specifying a number of pixels. (e:g. ‘5’).
Note: Negative numbers are also possible. Make small adjustments so this component does not shift above or behind adjacent components. Test in Mobile as well.
Link - Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Most 'link to' and hyperlink settings in UBCMS components have an optional companion setting that specifies where the linked page will load. Sometimes this is a 'Target' dropdown and for other components it is a simple 'Open in new window' checkbox.
'Target' supports several settings:
- Same Tab - The link will load in the current browser tab or within the current frame/iframe if one exists. This is the default setting.
- New Tab - The link will load in a new browser tab.
- Parent Frame – The link will load within the parent iframe if one exists, otherwise it will load in the current browser tab.
- Top Frame – The link will ignore all frames/iframes and load in the current browser tab.
'Open in new window' means to open in a new tab of the current browser.
When 'open in new tab' or 'window' is selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
Exclude from "on this page" lists - This optional setting prevents this title from being included in the On This Page component (see the live example in the right sidebar).
ID - Enter a character string to identify this title as a link anchor so another page can link here.
Technical Restrictions
- Level 4 and 5 headings that are displayed in all-capital letters cannot be made lower case.
- Photos set to Float may visually overlap the H2 Section Bar. Change the component order and/or add a Divider to break them apart.
Accessibility Concerns
To meet accessibility requirements, every page must have an H1 heading (e.g. using the Title component).
Sometimes it is preferable for aesthetic reasons not to show the main heading, especially on a home page. In such cases, a Properties setting 'Use Site Title as H1' adds the page's title into the page's source code, where it is not visibly displayed but is available for assistive technology such as screen readers.
- This setting is ON by default for every home page, but can be turned off if needed.
- This setting is OFF by default for any page that is not a home page, but can be turned on if needed.
- This setting works for standard heading types. For custom headings, additional coding may be required.
Additional Reference:
Headings, provided by the UBCMS Title component, provide structure to the content on your Web pages. They break up your content into meaningful sections, define its hierarchical structure and provide handy anchors for deep linking or the On This Page component. WebAIM.org calls this semantic structure. Done effectively, this structure allows humans, screen readers and automated search engines to easily digest your page.
Headings in the UBCMS are generally constructed using Title and Collapsible Content Container components.
Best practice: To facilitate navigation and understanding of the overall document structure by both users and search engines, headings should be nested; e.g., one H1 followed by one or more H2's, each H2 followed by one or more H3's, each H3 followed by one or more H4's, and no jumps of more than one step (e.g. an H2 should not be followed by an H4).
For example,
- H1, then H2, then H3... is ok.
- H1, H2, H3, then H2... is ok.
- H1 then H3... is NOT ok.
Additional Reference:
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Additional Reference:
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:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.
Additional Reference:
Advanced Use
Accents, emojis and other 'smart characters' can be pasted from Word or another website, or can be created using Alt code shortcuts.
Please be thoughtful in your use of special characters. Some may be correct but display awkwardly on the page, while emoji meanings vary markedly from culture to culture and a poor but well-intentioned choice may confuse or even upset your audience.
See an Example
Watch a Training Video
Training opportunities are available