Spezielle Elemente

Für besonders wichtige Inhalte kann der Highlight-Banner eingesetzt werden. Dieser geht über die gesamte Content-Breite und bietet die Möglichkeit, ein helles oder dunkles Textfeld sowie eine Logo-Grafik anzuzeigen. Folgend zwei Beispiele:

• Farbschema dunkel ohne Logo
• Farbschema hell mit Logo

Hinweis: Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.

Anleitung zum Element Highlight-Banner

Grafik/Foto für den Highlight-Banner erstellen

Das Akkordeon-Element ermöglicht es, Content “versteckt” zu platzieren und dadurch zu strukturieren. Es zeigt nur eine Überschrift an - Benutzer*innen können es aufklappen und darunter die für sie interessanten Informationen einsehen. Innerhalb des Akkordeons ist das Anzeigen von Bild und Text möglich. Außerdem gibt es einen Link, mit dem alle Akkordeonelemente ausgeklappt bzw. geschlossen werden können.

Hinweise: Das Akkordeon bietet zwei verschiedene Verhaltensweisen: Entweder jedes Akkordeonelement wird einzeln geöffnet und im geöffneten Zustand behalten oder das geöffnete Akkordeonelement schließt sich, sobald ein anderes Akkordeonelement geöffnet wird. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Akkordeon

Kontaktboxen sind eine gute Möglichkeit, verschiedene Informationen zu Mitarbeiter*innen und deren Erreichbarkeit auf einen Blick darzustellen. Im Unterschied zum Plug-In UniWien Personalliste, das Daten direkt aus dem u:find auslesen kann, müssen die Informationen hier manuell eingegeben werden. Dafür ist die Darstellung flexibler. 

In einem Element können mehrere Kontaktboxen auf einmal angelegt werden, die dann über bis zu drei Spalten am Desktop angezeigt werden. Mobil sind die Kontaktboxen untereinander angeordnet.
Es gibt mehrere Layout-Varianten:

• Ohne Bild
• Standard-Layout (großes Bild)
• Rundes Bild

Hinweise: Neben dem Namen, der E-Mailadresse und der Telefonnummer können auch Informationen wie der Link zu einer Website oder zu spezifischen Social-Media-Kanälen eingetragen werden. Letztere werden jeweils durch ihre entsprechenden Icons in der Kontaktbox abgebildet. 

Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Kontaktbox

Das Medienecho ist ein Element zur Verlinkung von Medienberichten. Es bietet Platz für bis zu vier Einträge, die am Desktop nebeneinander, mobil als Slider dargestellt werden. Es besteht die Möglichkeit, per Link darunter auf weitere Berichte bzw. ein Medienarchiv zu verweisen. Für die einzelnen Einträge kann jeweils ein passendes Icon (vordefinierte Auswahl im Backend), ein Titel, eine Preheadline, ein Autor*innenname und ein Datum gesetzt werden.

Hinweis: Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Medienecho

Dieses Element wird verwendet, um mehrere Social-Media-Kanäle, einen Podcast und einen Blog gebündelt auf der Website zu präsentieren. Es beinhaltet einen Erläuterungstext und ein optionales Foto. Die einzelnen Kanäle werden über vordefinierte Icons unter dem Text dargestellt.

Hinweise: In der mobilen Variante wird das Bild automatisch ausgeblendet. 

Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.

Anleitung zum Element Social Media & Podcast

Dieses Element präsentiert Kurzinformationen sehr übersichtlich. Es eignet sich besonders, um Kurse und Weiterbildungsangebote in kompakter Form mit verschiedenen spezifischen Informationen (z.B. Abschluss, Dauer, Kosten, …) auf einer Website darzustellen. Ein Link-Button ermöglicht eine direkte Kontaktaufnahme, ergänzende Kontaktdaten erleichtern die Klärung offener Fragen. Die reduzierte Darstellung sorgt für Übersichtlichkeit und erleichtert die Navigation. Es können auch zwei Einträge nebeneinander dargestellt werden. Mobil sind diese swipebar.

Hinweis: Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.

Anleitung zum Element Shortfacts

Mit diesem Element können ein oder mehrere Zitate auf einer Website angezeigt werden. Enthalten sind jeweils ein großes Bild, eine Tag-Line, das Zitat, der Name und die Zuordnung der zitierten Person sowie ein weiterführender Link. 

• Mit einer Person
• Mit mehreren Personen

Hinweise: Werden im Element mehrere Zitate eingetragen, werden diese automatisch als Slider dargestellt. Auf Mobilgeräten erscheint das Zitat unter dem Bild. 

Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.

Anleitung zum Element Zitate

Dieses Element wird verwendet, um eine klare Handlungsaufforderung innerhalb einer Website zu platzieren. Es besteht aus einer Preheadline, einer Headline und einem oder zwei Link-Buttons – empfohlen wird die Variante mit einem Button. 

Es ist in zwei Layout-Versionen verfügbar: 

• Call to Action mit hellem Hintergrund
• Call to Action mit blauem Hintergrund

Hinweise: Bei der Variante in Universitätsblau ist der Button weiß. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Call to Action

Mit diesem Element können zentrale Kennzahlen in unterschiedlichen Darstellungsformen auf einer Website präsentiert werden. Im Standard-Layout wird das Element ohne großes Hintergrundbild dargestellt – entweder in weiß mit farbiger Linie oder vollflächig in Universitätsblau (ähnlich den Teasern). Alternativ kann aber auch eine Banner-Variante gewählt werden, die ein vollflächiges Hintergrundbild mit Headline, eine Subheadline und einen Link-Button beinhaltet.

• Standard mit Linie
• Standard vollflächig in Universitätsblau
• Banner mit vollflächigem Hintergrundbild

Hinweise: Die Kennzahlen im Element können nicht verlinkt werden. Die Varianten mit Linie und vollflächig in Universitätsblau sollten nicht kombiniert werden. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Zahlen und Fakten

Dieses Element dient zur strukturierten Darstellung von Daten in mehreren Spalten und Zeilen. Es eignet sich besonders für kompakte Übersichten (z. B. Zeitangaben, Kennzahlen oder Vergleiche). Tabellen können mit oder ohne Tabellenunterschrift angezeigt werden. Die Spalten- und Zeilenanzahl kann individuell definiert werden. Der Tabellenkopf befindet sich standardmäßig oben und bietet Optionen zum Sortieren. In der mobilen Darstellung wird die Tabelle horizontal scrollbar.

Es gibt drei Layout-Varianten:

• Weiß
• Gestreift
• Umrahmt

Hinweise: Für sortierbare Tabellen muss die Kopfzeile oben platziert werden. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.

Anleitung zum Element Tabelle