Title is a heading for the page or a page section.

The Title component renders HTML heading elements. For more information, refer to the Heading elements section in Accessibility

For general information about the Title Core Component, refer to AEM's Title Component documentation.


Heading scale

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Case guidelines

Use sentence case for headings. Sentence case is the easiest case to scan quickly. When writing in sentence case, only capitalize the first letter of the sentence.


Title colors

There are two text colors to choose from: default and ghost. Only use default text on containers with background colors set to default, subtle, or subtle gradient. Only use ghost text on containers with background colors set to accent, accent gradient, or assertive.

Default title color

Ghost title color


Text alignment

The alignment of the title component depends on the template that it is being used on. The left navigation template will left align all titles. The full width template will provide the option to choose either to center align or left align the title component. 


Title decoration

The title decoration can only be applied to h2s. These styles cannot be combined. Do not create invalid h2s just to use these decorations. Only use title decorations once per page.

Frame

The frame will emphasize the h2’s content section. There are two color options: primary gradient or accent gradient.

Primary gradient frame

Accent gradient frame

Gradient

Only use the gradient decoration on light backgrounds.

Gradient


Top margin

Default

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Increase

Heading level 1

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Decrease

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Remove

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6