Live Demo

Heading Hierarchy & Type Scale

Font: Libre Franklin · Sizes in px (font-size / line-height · weight)

Display Headings

Title with Eyebrow & Subtitle

Text Styles

Rich Text Block

Code sample

<!-- Heading hierarchy -->
<h1 class="caat-title">Your Pension, Your Future</h1>
<h2 class="caat-title">Understanding DBplus</h2>

<!-- Display heading -->
<h1 class="caat-title caat-title--display">Hero Headline</h1>

<!-- Eyebrow + title + subtitle -->
<span class="caat-eyebrow">DBplus Plan</span>
<h2 class="caat-title">Understanding Your Benefits</h2>
<p class="caat-title__subtitle">Supporting description text.</p>

<!-- Text variants -->
<p class="caat-text caat-text--lead">Lead paragraph.</p>
<p class="caat-text">Body text.</p>
<p class="caat-text caat-text--small">Small text.</p>
<p class="caat-text caat-text--muted">Muted text.</p>

<!-- Rich text block -->
<div class="caat-rich-text">
  <h2>Section Heading</h2>
  <p>Paragraph with <strong>bold</strong> and <em>italic</em>.</p>
  <ul>
    <li>List item</li>
  </ul>
  <p><a href="#">Link text</a></p>
</div>

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation

5. Content Guidance

• Use heading levels in logical order (h1 → h2 → h3). Never skip levels for visual styling — use heading style options instead.
• Display headings are reserved for hero sections and primary landing page titles. Use sparingly.
• Eyebrows provide context (e.g. "DBplus Plan", "Member Resources") — keep them short and uppercase.
• Lead text works well as the first paragraph of a section introduction. Limit to 1–2 sentences.
• Rich text blocks should not exceed ~500 words. For longer content, break into multiple components with headings.
• Use bold for emphasis and key terms. Avoid underlining text that isn't a link.
• Links in rich text should have descriptive text — avoid "click here" or "read more".

6. Semantic HTML

Title variant

<!-- Basic title -->
<h2 class="caat-title">Understanding DBplus</h2>

<!-- Display title -->
<h1 class="caat-title caat-title--display">Your Pension, Your Future</h1>

<!-- With eyebrow and subtitle -->
<div class="caat-title-block">
  <span class="caat-eyebrow">DBplus Plan</span>
  <h2 class="caat-title">Understanding Your Benefits</h2>
  <p class="caat-title__subtitle">Everything you need to know about your pension.</p>
</div>

Text variant

<p class="caat-text caat-text--lead">Lead paragraph text.</p>
<p class="caat-text">Standard body text.</p>
<p class="caat-text caat-text--small">Small supporting text.</p>
<p class="caat-text caat-text--muted">Muted disclaimer text.</p>

Rich text variant

<div class="caat-rich-text">
  <h2>Section Heading</h2>
  <p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
  </ul>
  <p><a href="/resources">Member Resource Centre</a></p>
</div>

7. CSS Contract

8. Accessibility

9. SEO

• Headings create the document outline. Use a single h1 per page that describes the page topic.
• Include target keywords naturally in headings and body text — avoid keyword stuffing.
• Rich text links with descriptive anchor text improve internal linking signals.
• Proper heading hierarchy helps search engines understand content structure.
• Lead paragraphs often appear in featured snippets — write them as concise summaries.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Notes

• Resource type: caat/components/text-title
• Sling Model: TextTitleModel — exposes variant, headingLevel, headingStyle, eyebrow, title, subtitle, textStyle, bodyText, richText.
• HTL template: text-title.html — uses data-sly-test to switch between title, text, and rich-text variants. Heading level rendered dynamically via data-sly-element.
• Client library: caat.components.text-title — CSS only; no JS required.
• Policy: Authors can restrict available heading levels and styles per template policy. Rich text editor toolbar configurable.
• Allowed parents: Layout Container, Card Body, Article Layout, Hero Content.

12. Dialog Model

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

{
  "jcr:primaryType": "nt:unstructured",
  "sling:resourceType": "cq/gui/components/authoring/dialog",
  "tabs": {
    "properties": {
      "variant": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/select",
        "label": "Variant",
        "name": "./variant",
        "required": true,
        "options": ["title", "text", "rich-text"]
      },
      "headingLevel": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/select",
        "label": "Heading level",
        "name": "./headingLevel",
        "required": true,
        "options": ["h1", "h2", "h3", "h4", "h5", "h6"]
      },
      "headingStyle": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/select",
        "label": "Heading style",
        "name": "./headingStyle",
        "options": ["default", "display", "section"]
      },
      "eyebrow": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Eyebrow text",
        "name": "./eyebrow",
        "maxlength": 40
      },
      "title": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Title text",
        "name": "./title",
        "required": true
      },
      "subtitle": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textarea",
        "label": "Subtitle text",
        "name": "./subtitle"
      },
      "textStyle": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/select",
        "label": "Text style",
        "name": "./textStyle",
        "options": ["body", "lead", "small", "muted"]
      },
      "bodyText": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textarea",
        "label": "Body text",
        "name": "./bodyText"
      },
      "richText": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/rte",
        "label": "Rich text content",
        "name": "./richText",
        "useFixedInlineToolbar": true
      }
    }
  }
}

13. QA Acceptance Checklist

• All heading levels (h1–h6) render with correct size, weight, and colour.
• Display variant renders at 3.5 rem with weight 900 and tight letter-spacing.
• Eyebrow renders as small uppercase text above the heading.
• Subtitle renders below heading with muted opacity.
• Lead, body, small, and muted text styles render at correct sizes.
• Rich text block correctly styles nested headings, paragraphs, lists, links, and inline formatting.
• All text meets WCAG AA colour contrast requirements.
• Links in rich text show visible focus ring on keyboard navigation.
• Content reflows correctly at 200% browser zoom.
• Heading level in DOM matches the authored selection (not just visual size).
• Responsive: display headings scale down on mobile viewports.
• Analytics events (text-viewed, link-click) fire correctly.
• Cross-browser tested: Chrome, Firefox, Safari, Edge.

14. Definition of Done