Main Icon Headlines

The c-main-headline consists of a Circular Icon and a main Headline (usually H1 or H2) and an optional context icon.

Example

Example with DuoTone Icon

Show Code

<div class="vp-raw">
  <section class="c-main-headline" role="region" aria-labelledby="dashboard-headline-01">
    <div class="c-main-headline__icon" aria-hidden="true">
      <span class="c-duotone-icon -labxpert_dark -lg"></span>
    </div>
    <h1 class="c-headline" id="dashboard-headline-01">
      Example with DuoTone Icon
    </h1>
  </section>
</div>

See Custom DuoTone Icons for more details on how to create and use custom DuoTone Icons.

Example with FontAwesome Icon

Show Code

<div class="vp-raw">
  <section class="c-main-headline" role="region" aria-labelledby="dashboard-headline">
    <div class="c-main-headline__icon" aria-hidden="true">
      <i class="fa-duotone fa-cat fa-3x fa-fw h-color-primary"></i>
    </div>
    <h1 class="c-headline" id="dashboard-headline">
      Example with FontAwesome Icon
    </h1>
  </section>
</div>

See Font Awesome Icons for more details on how to use Font Awesome Icons.

Context Modifiers

> .c-main-headline__icon__context > [FA ICON]

See Circular Icons for all available context icons and their meanings.

Examples

Neue Rezeptur herstellen

Rezeptur-Archiv

Abgeschlossene Taxierung

Abfüllung erneut herstellen

Show Code

<section class="c-main-headline m-t-xl" role="region">
  <div class="c-main-headline__icon" aria-hidden="true">
    <span class="c-duotone-icon -defektur_dark -lg"></span>
    <div class="c-main-headline__icon__context -neu">
      <i class="fas fa-plus"></i>
    </div>
  </div>
  <div class="c-main-headline__text">
    <h1 class="c-headline">Neue Rezeptur herstellen</h1>
  </div>
</section>
<section class="c-main-headline m-t-xl" role="region">
  <div class="c-main-headline__icon" aria-hidden="true">
    <span class="c-duotone-icon -archiv_dark -lg"></span>
    <div class="c-main-headline__icon__context -archiv">
      <i class="fa-kit fa-archiv"></i>
    </div>
  </div>
  <div class="c-main-headline__text">
    <h1 class="c-headline">Rezeptur-Archiv</h1>
  </div>
</section>
<section class="c-main-headline m-t-xl" role="region">
  <div class="c-main-headline__icon" aria-hidden="true">
    <span class="c-duotone-icon -taxierung_dark -lg"></span>
    <div class="c-main-headline__icon__context -fertig">
      <i class="fas fa-check"></i>
    </div>
  </div>
  <div class="c-main-headline__text">
    <h1 class="c-headline">Abgeschlossene Taxierung</h1>
  </div>
</section>
<section class="c-main-headline m-t-xl" role="region">
  <div class="c-main-headline__icon" aria-hidden="true">
    <span class="c-duotone-icon -abfuellung_dark -lg"></span>
    <div class="c-main-headline__icon__context -erneut">
      <i class="fas fa-redo"></i>
    </div>
  </div>
  <div class="c-main-headline__text">
    <h1 class="c-headline">Abfüllung erneut herstellen</h1>
  </div>
</section>

---

Taxierung aus dem Archiv

Optional Eyebrow Headline (not in use)

Show Code

<section aria-labelledby="tax-archiv-headline" role="region" class="c-main-headline m-y-l">
  <div class="c-main-headline__icon" aria-hidden="true">
    <span class="c-duotone-icon -taxierung_dark -lg"></span>
    <div class="c-main-headline__icon__context -readonly">
      <i class="fas fa-eye"></i>
    </div>
  </div>
  <div class="c-main-headline__text">
    <h1 id="tax-archiv-headline" class="c-main-headline__text__eyebrow">Taxierung aus dem Archiv</h1>
    <h2 class="c-headline h2">
      Optional Eyebrow Headline (not in use)
    </h2>
  </div>
</section>

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.