Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Title

The Core Component Title Component is a section heading component that features in-place editing.

Editor to Copy/Paste
Training
Figma Design

Title Component with Semantic Tags Matching Font Sizes

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Title Component with Semantic Tags with Font Size Override

Heading H1

Heading Title H1: Font Size 48/40 (Font matches H1 Value)

Heading Title H1: Font Size 32/24

Heading Title H1: Font Size 24/20

Heading Title H1: Font Size 20/18

Heading Title H1: Font Size 18/16

Heading Title H1: Font Size 16/16

Heading H2

Heading Title H2: Font Size 48/40

Heading Title H2: Font Size 32/24 (Font matches H2 Value)

Heading Title H2: Font Size 24/20

Heading Title H2 Font Size 20/18

Heading Title H2: Font Size 18/16

Heading Title H2: Font Size 16/16

Heading H3

Heading Title H3: Font Size 48/40

Heading Title H3: Font Size 32/24

Heading Title H3: Font Size 24/20 (Font matches H3 Value)

Heading Title H3 Font Size 20/18

Heading Title H3: Font Size 18/16

Heading Title H3: Font Size 16/16

Heading H4

Heading Title H4: Font Size 48/40

Heading Title H4: Font Size 32/24

Heading Title H4: Font Size 24/20

Heading Title H4 Font Size 20/18 (Font matches the H4 value)

Heading Title H4: Font Size 18/16

Heading Title H4: Font Size 16/16

Heading H5

Heading Title H5: Font Size 48/40
Heading Title H5: Font Size 32/24

Heading Title H5: Font Size 24/20

Heading Title H5 Font Size 20/18
Heading Title H5: Font Size 18/16 (Font matches H5 value)
Heading Title H5: Font Size 16/16
Heading H6
Heading Title H6: Font Size 48/40
Heading Title H6: Font Size 32/24
Heading Title H6: Font Size 24/20
Heading Title H6: Font Size 20/18
Heading Title H6: Font Size 18/16
Heading Title H6: Font Size 16/16 (Font matches H6 value)

Training

Usage:

The Title Component is intended to be used as the title or heading of a section of content. The available heading levels can be defined by the template author in the component's dialog.  For added convenience, simple in-place editing of the heading text is also available.

This new component introduces a major enhancement to how headings are styled:

  • A new style option, Font Size (Default Override), is now available in the Styles tab.
  • Authors can select an H-value (e.g., H1) and independently override its default font size.
  • Example: An H1 can now be styled at 20/18 instead of the default 48/40.

Benefits

  • Improved SEO and accessibility by decoupling semantic heading levels from visual styling.
  • Authors no longer need to choose an incorrect H-value simply to achieve a desired font size.
  • Greater design flexibility without compromising best practices.

Training Video

11:20

Authoring Capability

 

  • Title - This is the field where you will enter the title. If the field is left empty, the page will use the Page Title field in the Page Properties or the Title field if the Page Title field is empty.
  • Semantic Tag - this field is the HTML element that identifies the H value for the text.  However, it doesn't define the appearance. Those H-value tags include:
    • H1 =  Heading 48/40 (default appearance)
    • H2 = Heading 32/24 (default appearance)
    • H3 = Heading 24/20 (default appearance)
    • H4 = Heading 20/18 (default appearance)
    • H5 = Heading 18/16 (default appearance)
    • H6 = Heading 16/16 (default Appearance)  
  • Link - Defines the content to which the title will link. This can be a path to a content page, an external URL, or a page anchor.
  • Open in new tab (checkbox) - When checked, the link will open in a new browser tab.

 

 

 

  • Vertical Margin - The author can add a Margin to the top of the text component or none at all.
  • Banner - This field allows the author to add the lock icon for Members Only or the Rewards Start icon.
  • Font Color - If the background color is dark, the author can change the font color to white.
  • The Font Size (Default Override) - By default, the font size will correspond to the H value selected.  However, an author has the ability to override the default size and select any of the following font sizes:
    • Heading 48/40
    • Heading 32/24
    • Heading 24/20
    • Heading 20/18
    • Heading 18/18
    • Heading 16/16 

  • AI Config - You can set this container for AI functionality or you can set it for curated container or none.