Main Icon Headlines

The main headline consists of an icon and a headline text. Optionally, a context icon and an eyebrow headline can be added.

Main Headlines with Icon

section.c-main-headline 
> .c-main-headline__icon > [main-icon] + .c-main-headline__text 
> .c-headline

Example with Custom DuoTone Icons

.c-main-headline > c-main-headline__icon + .c-headline

INFO

Ihr LabXpert Dashboard

Example with Font Awesome Icons

INFO

Ihr LabXpert Dashboard

With Context Icon and optional Eyebrow

section.c-main-headline 
> .c-main-headline__icon > [main-icon] + .c-main-headline__icon__context 
> .c-main-headline__text > .c-headline__text__eyebrow + .c-headline

Eyebrow Headline Example

Accessibility Notes:

• If the Eyebrow Marks an Important Section Name: Use aria-labelledby to link the eyebrow to the main headline.
• If the Eyebrow is purely decorative: Use aria-hidden="true" on the eyebrow element.
• Use correct heading levels for the eyebrow and main headline to maintain semantic structure.

INFO

Taxierung aus dem Archiv

NRF 10.3. Metoprololtartrat-Lösung 1 mg/ml

Neu / New

.c-main-headline__icon__context.-neu

INFO

Neue Rezeptur herstellen

Fertig / Done

.c-main-headline__icon__context.-fertig

INFO

Neue Rezeptur herstellen

Erneut / Repeated Action

.c-main-headline__icon__context.-erneut

INFO

Defektur erneut herstellen

Archiv / Readonly

.c-main-headline__icon__context.-archiv or .c-main-headline__icon__context.-readonly

INFO

Archiv: Defekturen

Papierkorb / Trash

.c-main-headline__icon__context.-trash

INFO

Papierkorb: Signierte PDFs

---

Icon Sub-Headlines

WARNING

Currently, this only works in combination with our Product Icons. Used on the pharma4u website.

.c-icon-headline[.-labxpert/.-labor, .-medicheck, .-forum, .-stex, .-webinare, .-databases]

H1 Example

INFO

Der pharma4u Newsletter

H2 Example with and without Subline

Used in the Flyout Navigation.

INFO

Letzte Aktualisierung: 23.05.2025

Taxikon

Lorem ipsum dolor sit amet consetetur sadipscing elitr.

Without Subline

INFO

Taxikon

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Webinare

INFO

Kommende Termine 2025

Webseminare

Kommende Termine 2025

Example Typo3 Markup

INFO

Stand: Januar 2025

Tax-ikon – Das Lexikon zum Taxieren

Leistungen