Skip to content

Boxen

Eine Box zeigt eine kompakte Liste mehrerer verwandter oder einzelner Elemente wie Artikel oder Dokumente an. Die Liste verknüpft jedes Element mit seiner ursprünglichen Quelle.

Downloadbox

In der Downloadbox können zusätzlich relevante Dokumente verknüpft werden, die das jeweilige Thema vertiefen und den Nutzern einen echten Mehrwert bieten. Unter Einhaltung des Farbkonzeptes hat die Downloadbox stets einen farbigen Hintergrund.

<div class="list-box bg--lavender-secondary">
  <h5 class="h4">Downloads</h5>
  <ul class="m-0 p-0">
    <li class="list-group-item">
      <a href="#">
        Download Link
        <svg class="icon icon-download-21">
          <use
            xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-download-21"
          ></use>
        </svg>
      </a>
    </li>
    <li class="list-group-item">
      <a href="#">
        Download Link
        <svg class="icon icon-download-21">
          <use
            xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-download-21"
          ></use>
        </svg>
      </a>
    </li>
    <li class="list-group-item">
      <a href="#">
        Download Link
        <svg class="icon icon-download-21">
          <use
            xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-download-21"
          ></use>
        </svg>
      </a>
    </li>
    <li class="list-group-item">
      <a href="#">
        Download File
        <svg class="icon icon-doc">
          <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-doc"></use>
        </svg>
        <span class="doc-type">pdf</span>
      </a>
    </li>
  </ul>
</div>

In der Linkbox können zusätzlich relevante Links eingefügt werden. Diese Verlinkungen führen zu weiterführenden Informationen, hilfreichen Ressourcen oder ergänzenden Inhalten, die das Nutzererlebnis bereichern. Unter Einhaltung des Farbkonzeptes hat die Linkbox stets einen farbigen Hintergrund.

<div class="list-box bg--warm-grey-secondary">
  <h5 class="h4">Links</h5>
  <ul class="m-0 p-0">
    <li class="list-group-item">
      <a href="#">
        Lorem
        <svg class="icon icon-arrow-right">
          <use
            xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
          ></use>
        </svg>
      </a>
    </li>
    <li class="list-group-item">
      <a href="#">
        Ipsum
        <svg class="icon icon-arrow-right">
          <use
            xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
          ></use>
        </svg>
      </a>
    </li>
    <li class="list-group-item">
      <a href="#">
        Dolor
        <svg class="icon icon-arrow-right">
          <use
            xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
          ></use>
        </svg>
      </a>
    </li>
  </ul>
</div>

Verwandte Links können am Ende einer Artikelseite verwendet werden, um den Lesern den Zugang zu weiterführenden Inhalten zu erleichtern. Unter Einhaltung des Farbkonzeptes haben die Boxen stets einen farbigen Hintergrund, der visuell ansprechend ist und zur besseren Auffindbarkeit beiträgt.

<div class="related-links bg--purple-secondary-30">
  <h4>Verwandte Links</h4>
  <ul class="row p-0">
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Informationen zur Arbeitszeit- Regelung</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Dienstverhältnisse beenden</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Änderungen im Arbeits- und Sozialrecht 2022</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Beitragswesen: Aktuelle Werte 2022</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Informationen zum Mutterschutz</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Informationen zur Arbeitszeit- Regelung</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Dienstverhältnisse beenden</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Änderungen im Arbeits- und Sozialrecht 2022</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Beitragswesen: Aktuelle Werte 2022</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Informationen zum Mutterschutz</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Informationen zur Arbeitszeit- Regelung</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Dienstverhältnisse beenden</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Änderungen im Arbeits- und Sozialrecht 2022</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Beitragswesen: Aktuelle Werte 2022</a>
    </li>
    <li class="col-lg-6">
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
      <a href="#">Informationen zum Mutterschutz</a>
    </li>
  </ul>
</div>

Listenbox

Listenboxen helfen dabei, Inhalte in einer übersichtlichen und strukturierten Weise zu präsentieren. Sie ermöglichen es den Nutzern, schnell zu erkennen, welche Themen behandelt werden und wichtige Informationen auf einen Blick zu erfassen.

Listenbox

  • Informationen zur Arbeitszeit- Regelung
  • Dienstverhältnisse beenden
  • Änderungen im Arbeits- und Sozialrecht 2022
  • Beitragswesen: Aktuelle Werte 2022
  • Informationen zum Mutterschutz
<div class="list-box list-box--content bg--brown-secondary-40">
  <h4>Listenbox</h4>
  <ul class="m-0 ps-3">
    <li>Informationen zur Arbeitszeit- Regelung</li>
    <li><a href="#">Dienstverhältnisse beenden</a></li>
    <li>Änderungen im Arbeits- und Sozialrecht 2022</li>
    <li>Beitragswesen: Aktuelle Werte 2022</li>
    <li>Informationen zum Mutterschutz</li>
  </ul>
</div>

Inhaltsverzeichnis

Das automatische Inhaltsverzeichnis verbessert die Navigation, indem es Nutzern ermöglicht, schnell zu relevanten Abschnitten langer Seiten zu springen. Es basiert auf den H3-Überschriften, die zur Strukturierung dienen, erleichtert die Orientierung und spart Zeit bei der Informationssuche.
Aus technischer Sicht ist das Inhaltsverzeichnis ein leeres Element, welches per Javascript befüllt wird. Vorraussetzung dafür ist die korrekte Verwendung des Inhaltsverzeichnisses selbst, so wie die Markup Verschachtelung der Überschriften, die für die Auflistung relevant sind.

Lorem

Ipsum

Dolor

<div id="toc" class="bg--lavender-secondary-30">
  <svg class="icon icon-inhalt">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-inhalt"></use>
  </svg>
</div>

JS Selector: .article main > h3

<body class="article"><!-- können auch andere HTML Block Elemente mit dieser Klasse sein -->
    ...
    <main>
        ...
        <h3>Lorem</h3>
        <h3>Ipsum</h3>
        <h3>Dolor</h3>
        ...
    </main>
    ...
</body>

Hinweisbox

Hinweisboxen werden verwendet, um wichtige Informationen oder Anleitungen hervorzuheben, die Benutzer nicht übersehen sollten. Dies kann entscheidend sein, um Missverständnisse zu vermeiden und sicherzustellen, dass die Nutzer die wesentlichen Punkte verstehen. Unter Einhaltung des Farbkonzeptes hat die Hinweisbox stets einen farbigen Hintergrund. Bei der Hinweisbox ist eine Headline zusätzlich zum Fließtext möglich. Außerdem kann man im Fließtext Verlinkungen mittels Textlink setzten.

Hinweis

Die Hinweisbox

Die Farbe der Hinweisbox ändert sich entsprechend der Kategorie in der man sich befindet. Dieser Text ist ein Platzhalter und dient zur Darstellung. 
<div
  class="alert alert-box alert-info border-0 rounded-0 bg--purple-secondary"
  data-gtm-box="Hinweis"
>
  <div class="alert-info-icon">
    <svg class="icon icon-hinweis">
      <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-hinweis"></use>
    </svg>
    <span>Hinweis</span>
  </div>
  <p><strong>Die Hinweisbox</strong></p>
  Die Farbe der Hinweisbox ändert sich entsprechend der Kategorie in der man
  sich befindet. Dieser Text ist ein Platzhalter und dient zur Darstellung.
</div>

Achtungbox

Achtungboxen können genutzt werden, um Benutzer vor möglichen Fehlern zu warnen oder sie über notwendige Vorsichtsmaßnahmen zu informieren. Dies ist besonders wichtig in Formularen oder bei komplexen Interaktionen, um Eingabefehler zu minimieren. Unter Einhaltung des Farbkonzeptes hat die Achtungbox stets einen farbigen Hintergrund. Bei der Achtungbox ist eine Headline zusätzlich zum Fließtext möglich. Außerdem kann man im Fließtext Verlinkungen mittels Textlink setzten.

Achtung

Die Achtungbox

Die Farbe der Achtungbox ändert sich entsprechend der Kategorie in der man sich befindet. Dieser Text ist ein Platzhalter und dient zur Darstellung. 
<div
  class="alert alert-box alert-info border-0 rounded-0 bg--brown-secondary"
  data-gtm-box="Achtung"
>
  <div class="alert-info-icon">
    <svg class="icon icon-warning-triangle">
      <use
        xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-warning-triangle"
      ></use>
    </svg>
    <span>Achtung</span>
  </div>
  <p><strong>Die Achtungbox</strong></p>
  Die Farbe der Achtungbox ändert sich entsprechend der Kategorie in der man
  sich befindet. Dieser Text ist ein Platzhalter und dient zur Darstellung.
</div>

eService-Box

Sie bieten eine Möglichkeit, zusätzliche Erklärungen oder kontextbezogene Informationen zu einem eService bereitzustellen, ohne den Hauptinhalt zu unterbrechen. Dies hilft den Nutzern, besser zu verstehen, was sie tun müssen oder welche Bedeutung bestimmte Informationen haben. Unter Einhaltung des Farbkonzeptes hat die eService-Box stets die selbe Hintergrundfarbe. Bei der eService-Box ist eine Headline zusätzlich zum Fließtext möglich. Außerdem kann man anschließend unter dem Fließtext eine Verlinkung mittels Textbutton setzten.

eService eService
Lehrabschlussprüfung: Online-Anmeldung

Hier können Sie sich rasch und direkt zu Ihrer Lehrabschlussprüfung anmelden.

Direkt zur Anmeldung 
<div
  class="alert alert-box alert-info border-0 rounded-0 bg--peach-secondary"
  data-gtm-box="eService"
>
  <div class="alert-info-icon">
    <img src="/assets/icons/icon-eservice.B4F21aSY.svg" alt="eService" />
    <span>eService</span>
  </div>
  <strong>Lehrabschlussprüfung: Online-Anmeldung</strong>
  <p>
    Hier können Sie sich rasch und direkt zu Ihrer Lehrabschlussprüfung
    anmelden.
  </p>
  <a class="btn btn-link" href="#" data-gtm-event="eservicebox-link">
    Direkt zur Anmeldung
    <svg class="icon icon-arrow-right">
      <use
        xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
      ></use>
    </svg>
  </a>
</div>

Zitatbox

Zitatboxen bieten eine visuelle Unterbrechung im Layout, die die Aufmerksamkeit der Nutzer auf sich zieht. Dies kann hilfreich sein, um wichtige Mitteilungen schnell und effektiv zu kommunizieren.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Placeholder

Mag. Verena Riebenbauer

Landesvorsitzende von Frau in der Wirtschaft Niederösterreich

<figure class="quote border-top border-bottom" data-gtm-box="Zitat">
  <blockquote class="blockquote c--brown-primary">
    <svg class="icon icon-quote-start">
      <use
        xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-quote-start"
      ></use>
    </svg>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
      ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus.
    </p>
    <svg class="icon icon-quote-end">
      <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-quote-end"></use>
    </svg>
  </blockquote>
  <figcaption class="blockquote-footer">
    <picture>
      <img src="https://picsum.photos/id/669/70/70" alt="Placeholder" />
    </picture>
    <div>
      <p>Mag. Verena Riebenbauer</p>
      <p>Landesvorsitzende von Frau in der Wirtschaft Niederösterreich</p>
    </div>
  </figcaption>
</figure>