Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Title Component

    The Title component offers formatting for section headings. It is used to introduce new sections of content on the page.

     

    Note that the Title component is not the page title. The page title is set when the author creates the page (it can be changed later in Page Properties), and is set as part of the Hero component. Only the page title displays at h1 heading level.

    Overview

    Component name: Title

    Authors who can use: any

    Templates/page types that can use component: all

    Required or optional: optional

    Authoring Fields

    Adding the Title component to the page

    Once on the desired page in Edit mode, add the Title by doing the following:

    Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Title” in the search bar, or scroll to the Title in the list. Double click to add to page.

    Option 2: On the left hand rail, navigate to the Components tab. Type “Title” in the search bar, or scroll to the Title in the list. Double click to add to page.

    Note that the Title automatically defaults to the Small display size and h2 type size. Both can be edited.

    Editing the Title component

    1. With the edit wrench, open the component.

    Title toolbar, featuring the edit wrench.

    2. Properties Tab Title field: Edit the Title text. The text in the Title automatically defaults to use the page title; it can be changed here. Type / Size dropdown: Edit the H-level of the Title. This does not affect the display size, but is instead used for accessibility purposes. Make sure the H-level reflects the item’s priority on the page (ex. h2 for section headers, h3 for sections that fall under h2, etc.). Default: h2.

    The Properties tab in the Title authoring dialog. Fields explained below.

    3. Styles tab

    1. Select display size of title dropdown: Edit the display size of the Title. Choose between Small, Medium, and Large.
      1. Note that in the dropdown, None will show checked by default. This is due to an AEM page property setting. The display size is by default set to Small, despite None being checked.
      2. When selecting display size, do not select the None option, as it has no styling applied.
    The Styles tab in the Title authoring dialog. Fields explained below.

    Accessibility

    1. Display size is separated from H-level so as to edit the look and feel without compromising the Title’s accessibility and SEO. Take care when changing display size so that residents understand how each section of the page relates to the next.
    2. Provide descriptive section titles that are easy to understand. Reference the Style Guide for more information.

    Other tips

    1. Use the Emulator widget to test Title size on different devices.

    Emulator shows how Title wraps on a Galaxy S7 phone. Title "This is my test title" is one row; title "This test title is longer, so it will wrap onto 2 rows" is two rows.

    2. The Title has a maximum width. Once met, text will wrap to another line.

    3. It is not recommended that a nested Title’s size be increased to match a higher ranked Title. However, changing a nested Title’s size to match a lower ranked Title is typically okay.

    4. The display size can also be edited directly from the Edit Toolbar.

    1. Select the paintbrush.
    2. Choose between Small, Medium, and Large.
    3. Note that in the dropdown, no size is checked by default. The display size is set to Small, despite no size being checked.
    Title authoring dialog showing the Styles dropdown options (None, Large, Medium, Small)