Title Component

A heading.

Flex UI Classic

Flex UI is available to all UBCMS users now. Learn more.

On this page:

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

> Read more.

Last reviewed: September 17, 2021

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.

The component opened for configuring.

The component opened for configuring the settings.

Link - Enter a URL here to turn the title into a clickable hyperlink. Use the magnifying glass to browse for a target page within the UBCMS.

Open in new window - This optional setting forces the clicked link to open in a new browser tab or window.

  • 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.

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

Related Components

Was This Information Helpful?

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