Buttons

Die Integration unterschiedlicher Interaktionselemente erfolgt gezielt: Wichtige und zentrale Interaktionen werden durch auffällig gestaltete Buttons oder Schaltflächen hervorgehoben. Zur Verfügung stehen zwei Buttons mit unterschiedlicher Gewichtung: Der Primär- und der Sekundärbutton.

Primary Button

Die wichtigste Interaktion, die der Benutzer auf einer Seite durchführen kann, erfolgt über eine primäre Schaltfläche. Dadurch wird eine visuelle Hierarchie zwischen den verfügbaren Schaltflächen geschaffen. Wenn auf einer Seite nur ein Button verwendet wird, wird in jedem Fall der Primary Button verwendet. Der Primary Button ist 100% schwarz mit weißer Schrift. Der Primary Button wird für zentrale Aktionen verwendet wie „Senden“ und „Weiter“ etc.

Primary

<a class="btn btn-primary" href="#"> Primary </a>

Primary Button mit Icon

Der Primary Button mit Icon wird für das Anmelden eingesetzt. Das Icon stammt aus dem bereitgestellten Icon-Set.

Primary mit Icon

<a class="btn btn-primary" href="#">
  <svg class="icon icon-user">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-user"></use>
  </svg>
  Primary mit Icon
</a>

Secondary Button

Der Secondary Button ist weiß mit einem 1 Pixel breiten schwarzen Rand. Er eignet sich für Aktionen, die nicht im Mittelpunkt stehen und als zweite Wahl angesehen werden.

Secondary

<a class="btn btn-secondary" href="#"> Secondary </a>

Secondary Button mit Icon

Der Secondary Button kann alternativ mit Icon verwendet werden. Die Icons können aus dem bereitgestellten Icon-Set ausgewählt werden.

Secondary mit Icon

<a class="btn btn-secondary" href="#">
  <svg class="icon icon-user">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-user"></use>
  </svg>
  Secondary mit Icon
</a>

System Icon Button

System Icon Buttons enthalten ein aussagekräftiges Icon und dienen dazu, klassische Systeminteraktionen wie Bearbeiten, Herunterladen oder Anrufen zu initiieren. Die Icons können aus dem bereitgestellten Icon-Set ausgewählt werden.

<a class="btn btn-secondary--grey btn-secondary" href="#">
  <svg class="icon icon-user">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-user"></use>
  </svg>
</a>

Gruppieren von Primary, Secondary und Text Button

Primary, Secondary und Text Buttons können gruppiert werden, um mehrere Aktionen nebeneinander anzubieten und eine klare visuelle Hierarchie zu schaffen, die die Benutzer:innen führt. Der Primary Button hebt die wichtigste Aktion hervor und wird immer rechts in der Gruppierung platziert. Die gesamte Gruppierung ist immer links platziert. Pro View darf nur ein Primary Button verwendet werden. Secondary Buttons ergänzen den Primary Button und können in einer Gruppierung mit bis zu zwei Buttons links neben dem Primary Button angeordnet werden. Zusätzlich können Text Buttons in der Gruppierung verwendet werden, um unterstützende, weniger prominente Aktionen anzubieten. Sie werden entweder links von den Secondary Buttons oder, falls keine Secondary Buttons vorhanden sind, direkt links neben dem Primary Button positioniert.

Text Button Secondary Primary

<div class="button-group">
  <a class="btn btn-link" href="#"> Text Button </a
  ><a class="btn btn-secondary" href="#"> Secondary </a>
  <a class="btn btn-primary" href="#"> Primary </a>
</div>

Tag Button

Schlagwörter oder Tag Buttons sind kleiner als herkömmliche Buttons. In Weiß gehalten und von einer hellgrauen Umrandung akzentuiert, kommen sie zum Einsatz, um die Inhalte einer Liste oder Karte zu filtern. Die Kombination mit einem Icon ist möglich.

Tag

<a class="btn btn-tag btn-secondary--grey" href="#"> Tag </a>

Filter Button

Filter Buttons haben dasselbe Erscheinungsbild wie Schlagwörter. Sie sind zusätzlich mit einem Icon zur Aktivierung versehen. Im aktiven Zustand ist innerhalb des Kreises ein Häkchen und der Button ist Schwarz. Es gibt zwei besondere Filter-Buttons: Online und WIFI. Diese beiden Buttons unterscheiden sich visuell von den restlichen Filter-Buttons im aktiven Zustand: Der Online-Button ist Blau und der WIFI-Button Grün. Es können beliebig viele Filter Buttons aktiviert werden, um Inhalte zu filtern wie beispielsweise bei Veranstaltungen:

Filter

<div class="form-check btn btn-secondary btn-tag btn-tag-filter">
  <input class="form-check-input" type="checkbox" value="" id="filterTest" />
  <label class="form-check-label" for="filterTest">
    <svg class="icon icon-check">
      <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-check"></use>
    </svg>
    <span>Filter</span>
  </label>
</div>

Textbutton

Der Textbutton fungiert als dezenter Handlungsaufruf. Die Standardvariante ist eine Kombination aus Text im Schriftschnitt Medium und einem Pfeil, wobei der Pfeil dem Text nachgestellt ist. Diesen Button gibt es auch in einer Variante ohne Pfeil, wird jedoch nur in einer Button Gruppe so verwendet.

Text Button

<a class="btn btn-link" href="#">
  Text Button
  <svg class="icon icon-arrow-right">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"></use>
  </svg>
</a>

Textlink

Der klassische Textlink im Fließtext wird in der Linkfarbe Lila und als Unterstrichen hervorgehoben. Wird ein Textlink in einer Card als Liste gesetzt, wird dieser in Schwarz dargestellt, um eine visuelle Integration zu gewährleisten.
Die zusätzliche Darstellung der Icons nach einem Textlink ermöglichen die Kennzeichnung einer externen Verlinkung oder einer Datei. Unter WKO.at werden diese in einem speziellen Kontext angezeigt und setzen daher konkrete Markup Verschachtelungen, sowie Klassen vorraus!

Textlink

Textlink Extern

Textlink Datei

CSS Selector: .article main.col-lg-8 p > a

<body class="article"><!-- können auch andere HTML Block Elemente mit dieser Klasse sein -->
    ...
    <main class="col-lg-8">
        ...
        <p><a href="https://google.at">Textlink Extern</a></p>
        <p><a href="/test.pdf">Textlink Datei</a></p>
        ...
    </main>
    ...
</body>

Teaser Link

Der Teaser Link ist eine Variante des Textlinks im Schriftschnitt Regular. Der Teaserlink kann mit einem Pfeilen vor dem Text versehen sein. Diese Art der Links werden beispielsweise in der Verwandte Links Box verwendet.

Abfertigung

Suche Button

Der Suche Button ist eine Variante des Icon Buttons und öffnet nach klick auf den Button die Suche in der Navbar. Nähere Informationen stehen im Kapitel Header.

suchen

Carousel Button Slider

Der Carousel Button dient in der Regel dazu, dem Benutzer die Möglichkeit zu geben, eine Aktion auszuführen oder zum nächsten Slide zu kommen. Nähere Informationen stehen im Kapitel Slider.

Akkordion Button

Der Akkordion Button dient zur Steuerung der Inhaltsanzeige und ermöglicht, Inhalte in einer auf- und zuklappbaren Weise darzustellen. Nähere Informationen stehen im Kapitel Akkordion.

Pagination

Pagination wird verwendet, um große Mengen von Inhalten in überschaubare Abschnitte aufzuteilen und den Benutzern das Durchblättern oder Navigieren durch diese Abschnitte zu ermöglichen. Dafür werden Seitenzahlen und Pfeile für das Vor- und Zurückblättern verwendet. Die Darstellung der Seitenanzahl wird dynamisch an die Gesamtanzahl der verfügbaren Seiten angepasst. Die Seitenzahlen werden im Schriftschnitt Regular dargestellt. Die Zahl der aktuellen Seite wird im Schriftschnitt Bold hervorgehoben.

Zurück

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

Weiter

<nav class="pagination" aria-label="Pagination">
  <a href="#" class="prev disabled" aria-disabled="true">
    <span class="visually-hidden">Zurück</span>
    <svg class="icon icon-arrow-left">
      <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-left"></use>
    </svg>
  </a>
  <ol>
    <li class="active">
      <a href="#1" aria-label="Seite 1" aria-current="page">1</a>
    </li>
    <li><a href="#2" aria-label="Seite 2">2</a></li>
    <li><a href="#3" aria-label="Seite 3">3</a></li>
    <li><a href="#4" aria-label="Seite 4">4</a></li>
    <li><a href="#5" aria-label="Seite 5">5</a></li>
    <li><a href="#6" aria-label="Seite 6">6</a></li>
    <li><a href="#7" aria-label="Seite 7">7</a></li>
    <li><a href="#8" aria-label="Seite 8">8</a></li>
    <li><a href="#9" aria-label="Seite 9">9</a></li>
  </ol>
  <a href="#" class="next">
    <span class="visually-hidden">Weiter</span>
    <svg class="icon icon-arrow-right">
      <use
        xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
      ></use>
    </svg>
  </a>
</nav>

Social Media Bar

Mithilfe der Social Media Bar können Benutzer die sozialen Medien und andere Kanäle aufrufen. Nähere Informationen stehen im Kapitel Kontaktbox.