Title Component (v1) title-component-v

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

Usage 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 design dialog. The content editor can select from available headings levels in the edit dialog. For added convenience, simple in-place editing of the heading text is also available.

Version and Compatibility version-and-compatibility

This document describes v1 of the Title Component, originally introduced with release 1.0.0 of the Core Components with AEM 6.3.

The following table lists the compatibility of v1 of the Title Component.

Sample Component Output sample-component-output

The following is sample taken from We.Retail.

Screenshot screenshot

HTML html

<div class="cmp cmp-title aem-GridColumn aem-GridColumn--default--12">
     <h2>Welcome! This is our finest equipment!</h2>
</div>

JSON json

"title": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/title",
              "jcr:title": "Welcome! This is our finest equipment!",
              "type": "h2"
            }

Edit Dialog edit-dialog

The edit dialog allows the content author to define the title text as well as select the heading level.

The in-place editor can also be used to edit the text of the title component.

Design Dialog design-dialog

The design dialog allows the template author to define the default heading level that title components will have when created by the content authors.

Technical Details technical-details

The latest technical documentation about the Title Component can be found on GitHub.

The entire core components project can be downloaded from GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.