Icon Headline

With Custom DuoTone Icons

See Custom DuoTone Icons

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

Ihr LabXpert Dashboard

Show Code

<div class="c-main-headline">
    <div class="c-main-headline__icon">
        <span class="c-duotone-icon -labxpert_dark -lg"></span>
    </div>
    <h1 class="c-headline">
        Ihr LabXpert Dashboard
    </h1>
</div>

With Font Awesome Icons

See Font Awesome Icons

Ihr LabXpert Dashboard

Show Code

<div class="c-main-headline">
    <div class="c-main-headline__icon">
        <i class="fa-duotone fa-cat fa-fw h-color-primary"></i>
    </div>
    <h1 class="c-headline">
        Ihr LabXpert Dashboard
    </h1>
</div>

Tailwind Icon Headline Example tailwind example

Headline

Show Code

<div class="tw-flex tw-items-center tw-space-x-5 tw-mt-20">
    <div class="tw-flex tw-items-center tw-p-3 tw-bg-gray-100 tw-rounded-full">
        <span class="c-duotone-icon -labxpert_original -lg"></span>
    </div>
    <div class="c-headline h1 !tw-pb-0">
        Headline
    </div>
</div>

---

Icon Sub-Headlines

WARNING

Currently, this only works with our Product Icons.

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

LabXpert

Header with icon

Show Code

<div class="c-icon-headline -labxpert">
  <span>LabXpert</span>
  <div>
    <h2>Header with icon</h2>
  </div>
</div>