Hero

Der Hero trägt zur raschen Vermittlung der Thematik einer Seite bei. Ein aussagekräftiges Bild begleitet die großen Überschriften und gibt direkten Aufschluss über das Thema.

Artikel Hero

Der Artikel Hero kommt ausschließlich auf den Artikelseiten zum Einsatz und immer in Verbindung mit dem Farbsystem. Der Artikel Hero besteht aus folgenden Elementen:

Titel
Untertitel
Lesedauer (optional)
Tags (optional)
Bild + Copyright (optional)
Datum
Sharebar

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Die zentralen Regelungen im Überblick: Von Normalarbeitszeit bis 12-Stunden-Tag und Lenkerarbeitszeit

Lesedauer: 7 Minuten

Lorem ipsum Blindtext

28. Dezember 2021

<header class="bg--lavender-secondary">
  <div class="container">
    <div class="article-head d-flex bg--white row">
      <div class="article-head-image">
        <figure>
          <img
            class="card-img"
            srcset="
              https://picsum.photos/id/836/796/448 796w,
              https://picsum.photos/id/836/832/468 832w,
              https://picsum.photos/id/836/896/504 896w
            "
            sizes="(min-width:1424px)448px, (min-width:1230px)398px, (min-width:800px)448px, 416px"
            src="https://picsum.photos/id/836/832/468"
            alt="Jungunternehmerin"
            width="832"
            height="468"
          />
          <figcaption><span class="copyright">© Copyright</span></figcaption>
        </figure>
      </div>
      <div class="article-head-h1">
        <h1 class="article-head-title">
          Lorem ipsum dolor sit amet, consectetuer adipiscing.
        </h1>
      </div>
      <div class="article-head-title">
        <h2 class="h3">
          Die zentralen Regelungen im Überblick: Von Normalarbeitszeit bis
          12-Stunden-Tag und Lenkerarbeitszeit
        </h2>
        <p>Lesedauer: 7 Minuten</p>
        <a class="btn btn-tag btn-secondary--grey" href="#"> Lorem ipsum </a>
        <a class="btn btn-tag btn-secondary--grey" href="#"> Blindtext </a>
      </div>
      <div class="d-flex border-top">
        <span class="h6">28. Dezember 2021</span>
        <div class="social-media-share">
          <button aria-expanded="false">
            <span class="visually-hidden">Inhalt teilen</span>
            <svg class="icon icon-share">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
              ></use>
            </svg>
          </button>
          <ul class="m-0 p-0">
            <li>
              <a
                href="#"
                id="copylink"
                title="Link kopieren"
                aria-label="Link kopieren"
              >
                <svg class="icon icon-link">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
                title="Als E-Mail versenden"
                aria-label="Als E-Mail versenden"
              >
                <svg class="icon icon-email">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.linkedin.com/sharing/share-offsite/?url="
                data-social="linkedin"
                title="Auf LinkedIn teilen"
                aria-label="Auf LinkedIn teilen"
              >
                <svg class="icon icon-linkedin">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.xing.com/spi/shares/new?url="
                data-social="xing"
                title="Auf Xing teilen"
                aria-label="Auf Xing teilen"
              >
                <svg class="icon icon-xing">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.facebook.com/sharer/sharer.php?u="
                data-social="facebook"
                title="Auf Facebook teilen"
                aria-label="AUf Facebook teilen"
              >
                <svg class="icon icon-facebook">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.twitter.com/share?text="
                data-social="twitter"
                title="Auf X teilen"
                aria-label="Auf X teilen"
              >
                <svg class="icon icon-twitter">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="#"
                onclick="window.print();return false;"
                title="Drucken"
                aria-label="Drucken"
              >
                <svg class="icon icon-print">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
                  ></use>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

Veranstaltungs Hero

Der Veranstaltungs Hero kommt ausschließlich auf den Detailseiten einer Veranstaltung zum Einsatz und immer in Verbindung mit dem Farbsystem. Der Hero besteht aus folgenden Elementen:

Titel
Untertitel
Datum
Bild + Copyright
Badge (optional)
Kalender Button
Link zur Veranstaltung Button
Ausgebucht Information (optional)
Sharebar

Online

WIFI

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Wochentag: Mo
Tag: 18
Monat: Apr

Lorem ipsum dolor sit amet, consectetuer adip dolor sit amet iscing ipsum dolor sit amet, consectetuer adip.

Im Kalender eintragen Zur Veranstaltung anmelden Ausgebucht

<header class="bg--duck-egg-green-secondary">
  <div class="container">
    <div class="article-head d-flex bg--white row">
      <div class="article-head-image">
        <figure>
          <img
            class="card-img"
            srcset="
              https://picsum.photos/id/692/796/448 796w,
              https://picsum.photos/id/692/832/468 832w,
              https://picsum.photos/id/692/896/504 896w
            "
            sizes="(min-width:1424px)448px, (min-width:1230px)398px, (min-width:800px)448px, 416px"
            src="https://picsum.photos/id/692/832/468"
            alt="Jungunternehmerin"
            width="832"
            height="468"
          />
          <figcaption><span class="copyright">© Copyright</span></figcaption>
          <div class="badge rounded-pill bg--webinar-blue">Online</div>
          <div class="badge rounded-pill bg--wifi-green-primary">WIFI</div>
        </figure>
      </div>
      <div class="article-head-h1">
        <h1 class="article-head-title">
          Lorem ipsum dolor sit amet, consectetuer adipiscing.
        </h1>
      </div>
      <div class="article-head-title">
        <dl>
          <dt class="visually-hidden">Wochentag</dt>
          <dd class="h6">Mo</dd>
          <dt class="visually-hidden">Tag</dt>
          <dd class="c--wko-red h3">18</dd>
          <dt class="visually-hidden">Monat</dt>
          <dd class="h6">Apr</dd>
        </dl>
        <h2 class="h3">
          Lorem ipsum dolor sit amet, consectetuer adip dolor sit amet iscing
          ipsum dolor sit amet, consectetuer adip.
        </h2>
        <p class="event-buttons mb-0">
          <a class="btn btn-secondary" href="#"> Im Kalender eintragen </a>
          <a class="btn btn-primary" href="#"> Zur Veranstaltung anmelden </a>
          <span class="c--wko-red">Ausgebucht</span>
        </p>
      </div>
      <div class="d-flex border-top">
        <div class="social-media-share">
          <button aria-expanded="false">
            <span class="visually-hidden">Inhalt teilen</span>
            <svg class="icon icon-share">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-share"
              ></use>
            </svg>
          </button>
          <ul class="m-0 p-0">
            <li>
              <a
                href="#"
                id="copylink"
                title="Link kopieren"
                aria-label="Link kopieren"
              >
                <svg class="icon icon-link">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-link"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="mailto:?subject=Titel der Seite - WKO.at&body=%0D%0A%0D%0Ahttps://wko.at/Seitenlink"
                title="Als E-Mail versenden"
                aria-label="Als E-Mail versenden"
              >
                <svg class="icon icon-email">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-email"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.linkedin.com/sharing/share-offsite/?url="
                data-social="linkedin"
                title="Auf LinkedIn teilen"
                aria-label="Auf LinkedIn teilen"
              >
                <svg class="icon icon-linkedin">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.xing.com/spi/shares/new?url="
                data-social="xing"
                title="Auf Xing teilen"
                aria-label="Auf Xing teilen"
              >
                <svg class="icon icon-xing">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.facebook.com/sharer/sharer.php?u="
                data-social="facebook"
                title="Auf Facebook teilen"
                aria-label="AUf Facebook teilen"
              >
                <svg class="icon icon-facebook">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="https://www.twitter.com/share?text="
                data-social="twitter"
                title="Auf X teilen"
                aria-label="Auf X teilen"
              >
                <svg class="icon icon-twitter">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a
                href="#"
                onclick="window.print();return false;"
                title="Drucken"
                aria-label="Drucken"
              >
                <svg class="icon icon-print">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-print"
                  ></use>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

eService Hero

Der eService Hero wird auf Seiten mit eServices sowie im Benutzerkonto eingesetzt und immer in Verbindung mit dem Farbsystem gestaltet. Die Section, in der sich der eService Hero befindet, kann entweder farblich hinterlegt oder weiß gestaltet werden, je nach Kontext und Anwendungsfall. Bei farblichen Sections wird die Gestaltung gemäß dem definierten Farbsystem eingefärbt, um eine klare visuelle Abgrenzung zu schaffen. In der mobilen Ansicht wird die Grafik ausgeblendet, um die Lesbarkeit und Übersichtlichkeit zu gewährleisten.

Der eService Hero besteht aus den folgenden Elementen:

Titel
Untertitel
Primary Button (optional)
Grafik

Lorem ipsum dolor sit amet, consectetuer adipiscing.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa.

Primary

<header class="hero-eservice bg--peach-secondary">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-md-9">
            <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing.</h1>
            <h2 class="h3">
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor Aenean massa.
            </h2>
            <a class="btn btn-primary" href="#"> Primary </a>
          </div>
          <div class="col-md-3 text-center">
            <svg class="icon icon-thema-weiterbildung">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-thema-weiterbildung"
              ></use>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Branchen Hero

Der Branchen Hero kommt auf den Startseiten der Branche zum Einsatz und immer in Verbindung mit dem Farbsystem. Der Hero besteht aus folgenden Elementen:

Titel
Abstract
Logo
Bild
Shortlinks (max. 3)

Gewerbe & Handwerk - Niederösterreich

Wir vertreten die Interessen aller niederösterreichischen Gewerbe- und Handwerksbetriebe. Das Motto unserer Arbeit: Qualität und Qualifikation. Aus Leidenschaft. Im Zentrum steht die Stärkung der Wettbewerbsfähigkeit unserer Unternehmen, die wir insbesondere durch Bürokratieabbau, Arbeitszeitflexibilisierung, Umsetzung des Nationalen Qualifikationsrahmens, Investitionsförderung und KMU-gerechter Normung erreichen wollen.

<header class="hero-image--FO">
  <picture>
    <source
      media="(max-width: 375px)"
      srcset="
        https://picsum.photos/id/526/702/394/ 2x,
        https://picsum.photos/id/526/351/197/ 1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 390px)"
      srcset="
        https://picsum.photos/id/526/732/410/ 2x,
        https://picsum.photos/id/526/366/205/ 1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 414px)"
      srcset="
        https://picsum.photos/id/526/780/438/ 2x,
        https://picsum.photos/id/526/390/219/ 1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 428px)"
      srcset="
        https://picsum.photos/id/526/808/454/ 2x,
        https://picsum.photos/id/526/404/227/ 1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 559px)"
      srcset="
        https://picsum.photos/id/526/1070/600/ 2x,
        https://picsum.photos/id/526/535/300/  1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 799px)"
      srcset="
        https://picsum.photos/id/526/1824/1024/ 2x,
        https://picsum.photos/id/526/912/512/   1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 991px)"
      srcset="
        https://picsum.photos/id/526/1344/504/ 2x,
        https://picsum.photos/id/526/672/252/  1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 1229px)"
      srcset="
        https://picsum.photos/id/526/1728/648/ 2x,
        https://picsum.photos/id/526/864/324/  1x
      "
      type="image/jpeg"
    />
    <source
      media="(max-width: 1423px)"
      srcset="
        https://picsum.photos/id/526/2088/783/ 2x,
        https://picsum.photos/id/526/1044/392/ 1x
      "
      type="image/jpeg"
    />
    <source
      media="(min-width: 1424px)"
      srcset="
        https://picsum.photos/id/526/3200/1200/ 2x,
        https://picsum.photos/id/526/1600/600/  1x
      "
      type="image/jpeg"
    />
    <img src="https://picsum.photos/id/526/3200/1200/" class="bg-cover" />
  </picture>
  <div class="container info d-flex">
    <div class="article-head">
      <div class="article-head-brand logo-FO">
        <img
          src="https://dummyimage.com/88x88"
          alt="Logo der Gewerbe &#38; Handwerk"
        />
        <h1 class="article-head-title FO">
          Gewerbe &amp; Handwerk - Niederösterreich
        </h1>
      </div>
      <div class="article-head-content">
        <div class="content bg--white">
          <p>
            Wir vertreten die Interessen aller niederösterreichischen Gewerbe-
            und Handwerksbetriebe. Das Motto unserer Arbeit: Qualität und
            Qualifikation. Aus Leidenschaft. Im Zentrum steht die Stärkung der
            Wettbewerbsfähigkeit unserer Unternehmen, die wir insbesondere durch
            Bürokratieabbau, Arbeitszeitflexibilisierung, Umsetzung des
            Nationalen Qualifikationsrahmens, Investitionsförderung und
            KMU-gerechter Normung erreichen wollen.
          </p>
        </div>
      </div>
    </div>
    <div class="header--aside">
      <div class="cta bg--brown-secondary">
        <div class="border-0 rounded-0 bg--undefined" role="alert">
          <div class="info-cta">
            <svg class="icon icon-cta-header">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-cta-header"
              ></use>
            </svg>
          </div>
          <p>
            Lorem ipsum dolor sit amet,
            <a href="#">consetetur sadipscing elitr</a>, sed diam nonumy eirmod.
          </p>
        </div>
      </div>
      <div class="cta bg--brown-secondary">
        <div class="border-0 rounded-0 bg--undefined" role="alert">
          <div class="info-cta">
            <svg class="icon icon-cta-header">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-cta-header"
              ></use>
            </svg>
          </div>
          <p>
            Lorem ipsum dolor sit amet,
            <a href="#">consetetur sadipscing elitr</a>, sed diam nonumy eirmod.
          </p>
        </div>
      </div>
      <div class="cta bg--brown-secondary">
        <div class="border-0 rounded-0 bg--undefined" role="alert">
          <div class="info-cta">
            <svg class="icon icon-cta-header">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-cta-header"
              ></use>
            </svg>
          </div>
          <p>
            Lorem ipsum dolor sit amet,
            <a href="#">consetetur sadipscing elitr</a>, sed diam nonumy eirmod.
          </p>
        </div>
      </div>
    </div>
  </div>
</header>