Title Component

A heading.

On this page:

  • An H1 is required on every page
  • Headings must be hierarchical
  • Link text should be meaningful.
  • Use the Open in New Window setting sparingly.

> Read more about making this component accessible.

Last reviewed: November 11, 2022

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 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 the regular title styles H1 through H5.

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.
examplee of the H2 Section Bar in use.

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.

Select a word or phrase and click the 'Chain' tool to build a clickable hyperlink.

Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.

Alt Text - This optional setting provides additional labeling for hyperlinks to clarify where the link will take the reader. This text supplies the 'Title' in the embedded HTML <a> tag, which is not a heading, but is instead read by screen readers and is also displayed as a mouse hover tool tip by some browsers. This is especially useful when the URL also serves as the link text, which can get flagged as an accessibility error. See Accessibility Concerns for more details.

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

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

> Learn more about building UBCMS pages.

Related Components

Was This Information Helpful?

(so we can thank you or request more details)
(buffalo.edu addresses only please)