Title

Use the title component when you need a section or page heading with level, style, and optional RSS or link.

AEM publisher guidelines

View the component in Figma

Live demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings help visitors scan the page and understand structure. Authors set the text (or inherit the page title), pick the heading level for accessibility, and can wrap the title in a link or add an RSS control when the section has a feed. Hide is for rare cases where editors still need to see a title in AEM but visitors should not.

Behaviour

  • If title is empty, the component can fall back to the page title chain.
  • A link can wrap the whole heading when a path is set.
  • RSS can appear beside the heading when feed options are enabled.
  • Hide suppresses output on publish while still helping authors in edit mode.

Anatomy

  1. Wrapper for the heading row.
  2. Optional RSS affordance when configured.
  3. Heading (or linked heading) at the chosen level.

Title component (placeholder)

Replace with h1, section h2, and RSS variants.

Content guidelines

  • Heading text should read as a clear label for the section that follows.
  • Use link on the title only when the whole heading should navigate (not for unrelated actions).

Best practices

Do

  • Use one h1 per page where possible; place lower levels in logical order.
  • Set title colour from the palette the dialog exposes for brand alignment.

Don't

  • Don't use hide for sensitive text; it is for presentation, not access control.

When to use

  • Primary page title (typically h1) or in-body section titles (h2–h6) with design system typography.
  • When a heading should also act as a link (for example to a parent unit).

When not to use

  • Navigation labels or menus; use nav components.
  • Card titles inside cards; use the Card component’s fields.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/title/title.jsp']

Authoring fields

Field Tab Purpose
Title Text Maps to jcr:title; blank uses page title chain.
Heading level Text h1–h6 (stored as type).
Link Text Pathfield href; wraps heading.
Hide Text Hides on publish; edit mode still shows.
Enable feed / Feed title / Feed URL Feed Optional RSS link block.
Size Advanced default or large (adds large class on standard headings).
Title colour Advanced Colour field; outputs style="color: #..." when set. Dialog listeners adjust default colour when switching away from h1.
CSS class Advanced additionalClass on the heading.

Technical behaviour

title.jsp reads jcr:title (dialog “Title”). If empty, it falls back to resourcePage page title, then title, then node name. The type property selects the heading element (dialog defaults to h1). For h1–h6, the component outputs that element with optional large size class, optional titleColor inline style, and optional additionalClass.

Link: If href is set, the heading (or legacy output) is wrapped in an <a>; internal /content/ paths get .html when missing.

Feed: When feed is enabled and feedlink is set, an RSS block floats to the end with feedtitle and an icon.

Hide: When hide is true, the title is not shown on publish but the string may still include (hidden) for editors; in edit mode the heading still renders for authoring.

Legacy switch branches remain for older content (nostyle, h1-large, h2-burgundy, sectionheader, default cq:text). New content should use the dialog options.

Anatomy (implementation)

  1. Wrapper: div.section-header-wrapper.
  2. Optional RSS row: div.float-end with link to feed.
  3. Optional link wrapping the heading.
  4. Heading: h1–h6 with classes per dialog (for example large, colour via style).

Instances in the codebase

Location Notes
apps/concordia/components/title/title.jsp Main implementation.
Item Location
Component apps/concordia/components/title/title.jsp
Dialog apps/concordia/components/title/dialog.xml

Output: Standard path uses explicit <h1>–<h6> tags with XSS filtering on title text (xssAPI.filterHTML).