README

Enhanced header content element for TYPO3 v13 and v14 with RTE support, preheader (eyebrow), icons, and responsive line breaks.

Features

• RTE-enabled headers: Format parts of your header with bold, italic, or color highlights
• Preheader/Eyebrow: Optional badge-styled text above the main header
• Icon support: Add icons to headers via ot-icons
• Responsive line breaks: Line breaks on desktop, spaces on mobile
• Color highlighting: Apply primary, secondary, or tertiary colors to text portions
• Accessible: Semantic HTML, proper heading hierarchy (h1-h6), ARIA attributes
• Bootstrap 5 compatible: Uses Bootstrap utility classes

Requirements

Installation

Composer (recommended)

composer require oliverthiele/ot-ceheader

Activation

1. Activate the extension in the TYPO3 Extension Manager
2. Include the Site Set "CE Header" in your site configuration

Usage

New fields in tt_content

The extension adds three fields to the "headers" palette:

RTE formatting options

The header RTE provides a minimal toolbar:

• Bold / Italic
• Style dropdown: Primary, Secondary, Tertiary color
• Soft hyphen: For controlled word breaks
• Source editing: For advanced users

Responsive line breaks

Use <br> in the RTE for line breaks that:

• Display as line breaks on desktop (≥768px)
• Display as spaces on mobile (<768px)

This allows multi-line headers on desktop while maintaining readability on mobile.

Example output

<header class="text-center">
    <div class="ot-ceheader-preheader">
        <i class="fa-solid fa-star"></i>
        New Feature
    </div>
    <h2 id="header-u123" class="ot-ceheader-h">
        <span class="ot-ceheader-text">
            <a href="/link">
                <span class="header-line">Welcome to</span>
                <span class="header-line">Our <span class="text-primary">Website</span></span>
            </a>
            <span class="ot-ceheader-subheader" role="doc-subtitle">
                Your tagline here
            </span>
        </span>
    </h2>
</header>

Configuration

TypoScript

The extension registers partial paths automatically. To customize, override:

lib.contentElement {
    partialRootPaths {
        20 = EXT:your_sitepackage/Resources/Private/Partials/
    }
}

RTE preset

The extension registers an RTE preset otCeheader. To customize, create your own YAML configuration and reference it in page.tsconfig:

RTE.config.tt_content.header_rte.preset = yourCustomPreset

Styling

Required CSS

The extension includes minimal required CSS via f:asset.css. For custom styling, target these classes:

.ot-ceheader-h { }           /* Header element (flex container) */
.ot-ceheader-text { }        /* Text wrapper */
.ot-ceheader-preheader { }   /* Eyebrow badge */
.ot-ceheader-subheader { }   /* Subheader text */
.ot-ceheader-br { }          /* Responsive line break */
.header-line { }             /* Individual header lines */

Color classes

Define these CSS custom properties or classes in your theme:

.text-primary { color: var(--bs-primary); }
.text-secondary { color: var(--bs-secondary); }
.text-tertiary { color: var(--your-tertiary-color); }

Accessibility

• Semantic heading elements (h1-h6) based on backend configuration
• role="doc-subtitle" for subheaders
• aria-hidden="true" for decorative icons
• Unique IDs for anchor linking (header-u{uid})
• Responsive line breaks hidden from screen readers

Sponsor

Development of this extension was sponsored by WWE Media.

License

GPL-2.0-or-later

Author

Oliver Thiele — oliver-thiele.de