Title / Heading

Component Information

Component Title Title / Heading
Description Plain Title Component with potential inclusion of Kicker & Subtitle
Features
  • In-place editing
  • HTML element configuration (h1 - h6)
  • Linkable to content pages, external URLs or page anchors
  • Styles
Location /apps/ehi-core/aem65/components/content/title-heading/v1/title-heading
sling:resourceSuperType core/wcm/components/title/v2/title
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The Title component uses the com.adobe.cq.wcm.core.components.models.Title Sling model as its Use-object.

 

Client Libraries

The component provides a core.wcm.components.title.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit and design dialogs.

BEM Description

BLOCK cmp-title
ELEMENT cmp-title__text
ELEMENT cmp-title__link

Extending the Components

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

Policy Properties

The following configuration properties are used:

  1. ./type - defines the default HTML heading element type (h1 - h6) this component will use for its rendering
  2. ./linkDisabled - defines whether or not the title link is disabled

Policy Dialog Visual

Edit Dialog Properties

The following properties are written to JCR for this Title component and are expected to be available as Resource properties:

  1. ./kicker - Optional text that typically appears above the title.
  2. ./jcr:title - will store the text of the title to be rendered
  3. ./type - will store the HTML heading element type which will be used for rendering; if no value is defined, the component will fallback to the value defined by the component's policy
  4. ./linkURL - will allow definition of a content page path, external URL or page anchor for linking the title.
  5. ./subtitle - Uses the page subtitle but can be overwritten by entering title text in field
  6. ./hideTheSubtitle - Checking this box will hide any content in the subtitle.

Edit Dialog Visual

Component Demo

Kicker Text

Title Text

Subtitle Text
    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        subtitle:
        Subtitle Text
    
    3. 

  3. 
        jcr:createdBy:
        E524Z2
    
    4. 

  4. 
        jcr:title:
        Title Text
    
    5. 

  5. 
        jcr:lastModifiedBy:
        E524Z2
    
    6. 

  6. 
        kicker:
        Kicker Text
    
    7. 

  7. 
        jcr:created:
        
    
    8. 

  8. 
        type:
        h1
    
    9. 

  9. 
        jcr:lastModified:
        
    
    10. 

  10. 
        sling:resourceType:
        ehi-core/aem65/components/content/title-heading/v1/title-heading
    
    11. 

  11. 
        hideTheSubtitle:
        false
    
    12. 




    
        

    

    
    

        
Kicker Text

        

            
                Title Text
            
        

        
Subtitle Text

    


    
    




    

    


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.