Label Versal Text
Icons
Icons sind visuelle Symbole, die Informationen auf einfache und verständliche Weise vermitteln. Sie werden zumeist ohne begleitenden Text eingesetzt und ermöglichen eine rasche Orientierung.
Ressource und Verwendung von Icons
Für die Bereitstellung von Icons für wko.at wird das Outline-Set der Streamline Regular als Ressource verwendet.
Kontaktinformation
Auf der Website wko.at sind Kontaktinformationen in sogenannten Kontaktboxen verfügbar. Diese Kontaktboxen können je nach Bereich farblich variieren. Die verschiedenen Kontaktmöglichkeiten sind jeweils mit einem schwarzen Icon versehen, das vor der entsprechenden Kontaktinformation angezeigt wird. Zusätzlich ist jede Box mit einem größeren farbigen Icon in der Größe von 100 x 100 Pixeln ausgestattet.
Social Media
Die verfügbaren Social Media Kanäle werden mittels entsprechender Icons in einem Kreis mit grauer Umrandung dargestellt.
Kontakt
Icons für Hinweise und Warnungen
Icons für Hinweise sind schwarz, Warnungen sind mit einem roten Icon hervorgehoben.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Icons – Themen
Können sich farblich ändern je nach Bereich
Beispiele für die Verwendung von Themen-Icons auf cards. In farblich markierten Abschnitten werden die Icons entsprechend der jeweiligen Farbe eingefärbt.
Icons – eServices (Auswahl)
Die online Services können verschiedene Plattformen, Anwendungen und Tools umfassen, die den Zugang zu Informationen, Unternehmensdaten, rechtlichen Ressourcen, Schulungen, Netzwerken und anderen relevanten Services erleichtern.
Kooperationsbörse
Nachfolgebörse
Wirtschaftskammer Wahlen
Firmen A-Z Profil
Veranstaltungen
Grundumlage
Sprite Sheet
Icons werden gesammelt in einem Sprite Sheet geführt und mithilfe von <use> und IDs im Markup eingefügt. Farben und Breiten der Konturen werden via Styling gesetzt.
<svg class="icon icon-arrow-right"> <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"></use></svg>| Vorschau | ID |
|---|---|
| icon-alert-circle-black | |
| icon-alert-circle | |
| icon-apple | |
| icon-arrow-down | |
| icon-arrow-left | |
| icon-arrow-nav | |
| icon-arrow-right | |
| icon-arrow-slide-left | |
| icon-arrow-slide-right | |
| icon-arrow-top | |
| icon-arrow-up | |
| icon-chat | |
| icon-check-circle | |
| icon-check | |
| icon-close | |
| icon-contact | |
| icon-copy | |
| icon-copy-2 | |
| icon-cta-header | |
| icon-date | |
| icon-time | |
| icon-delete-21 | |
| icon-doc-21 | |
| icon-doc | |
| icon-download-21 | |
| icon-download | |
| icon-edit | |
| icon-email | |
| icon-envelope | |
| icon-eservice | |
| icon-expand | |
| icon-facebook-outline | |
| icon-facebook | |
| icon-favorite | |
| icon-fax | |
| icon-filter-20 | |
| icon-flickr | |
| icon-google | |
| icon-headphones | |
| icon-hidden | |
| icon-hinweis | |
| icon-id-austria | |
| icon-info | |
| icon-inhalt | |
| icon-insta | |
| icon-kontakt | |
| icon-link-extern-21 | |
| icon-link | |
| icon-linkedin | |
| icon-lock | |
| icon-login-48 | |
| icon-login | |
| icon-mail-noti | |
| icon-navi-menu | |
| icon-notification-new | |
| icon-notification | |
| icon-phone-21 | |
| icon-phone | |
| icon-pin | |
| icon-pinterest | |
| icon-play | |
| icon-play2 | |
| icon-podcast | |
| icon-print-email | |
| icon-print | |
| icon-quote-end | |
| icon-quote-start | |
| icon-route | |
| icon-search | |
| icon-settings | |
| icon-share | |
| icon-skype | |
| icon-snapchat | |
| icon-survey | |
| icon-aw-ansprechpartner | |
| icon-aw-beratung | |
| icon-aw-foerderung | |
| icon-aw-import-export | |
| icon-aw-information | |
| icon-aw-innovation | |
| icon-aw-veranstaltungen | |
| icon-aw-wirtschaftslage | |
| icon-thema-abfallwirtschaft | |
| icon-thema-arbeitnehmerschutz | |
| icon-thema-arbeitsrecht | |
| icon-thema-aussenwirtschaft | |
| icon-thema-behoerdenwege | |
| icon-thema-beratung | |
| icon-thema-betreiberpflichten | |
| icon-thema-datenschutz | |
| icon-thema-ecommerce | |
| icon-thema-einstellen | |
| icon-thema-energie | |
| icon-thema-entlohnung | |
| icon-thema-entwickeln | |
| icon-thema-fahrbeschraenkungen | |
| icon-thema-finanzierung | |
| icon-thema-foerderung | |
| icon-thema-ideen | |
| icon-thema-innovation | |
| icon-thema-international | |
| icon-thema-klimaschutz | |
| icon-thema-lehre | |
| icon-thema-nachfolgen | |
| icon-thema-networking | |
| icon-thema-netzwerke | |
| icon-thema-planung | |
| icon-thema-sparten | |
| icon-thema-statistik | |
| icon-thema-steuern | |
| icon-thema-transformation | |
| icon-thema-ukraine | |
| icon-thema-vertrieb | |
| icon-thema-vorschriften | |
| icon-thema-weiterbildung | |
| icon-thema-wirtschaftsrecht | |
| icon-thema-foerderung | |
| icon-tiktok | |
| icon-twitter | |
| icon-uncheck | |
| icon-upload-file | |
| icon-upload | |
| icon-user-21 | |
| icon-user | |
| icon-video-60 | |
| icon-vimeo | |
| icon-visible | |
| icon-warning-triangle | |
| icon-www | |
| icon-xing | |
| icon-youtube |