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

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.

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.

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.

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

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.

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.

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

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.