Spezielle Elemente
Highlight-Banner
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:
Hinweis: Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.
Highlight-Banner dunkel ohne Logo
Das ist der Text des Banners. Der Banner ist im Farbschema dunkel angelegt.
Highlight-Banner hell mit Logo
Das ist der Text des Banners. Der Banner ist im Farbschema hell angelegt und zeigt das Logo der Universität Wien.
Grafik/Foto für den Highlight-Banner erstellen
Der Highlight-Banner sollte so gestaltet sein, dass sowohl in der Desktop- als auch in der mobilen Ansicht keine wichtigen Bildinhalte oder Informationen vom Textfeld überlagert werden. Hier sehen Sie, wie sich der Highlight-Banner bei Änderung der Bildschirmgröße verhält.
Akkordeon
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. In diesem Modus wird die Funktion „Alle ausklappen“ nicht angezeigt, da immer nur ein Abschnitt geöffnet sein kann. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.
Akkordeon mit Funktion "Jedes Element separat öffnen"
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beschreibung
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beschreibung
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beschreibung
Description
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Akkordeon mit Funktion "Andere Elemente einklappen"
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beschreibung
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beschreibung
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beschreibung
Description
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Kontaktbox
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:
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.
Kontaktbox ohne Bild
Vorname Nachname
BSc MSc Ph.D.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopieren
Linktext zu einer Website
Vorname Nachname
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopierenLinktext
Vorname Nachname
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopierenKontaktbox mit Standard-Layout (großes Bild)
Vorname Nachname
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopieren
Linktext zu einer Website
Vorname Nachname
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopieren+43-1-4277-444
Linktext zu einer Website
Kontaktbox mit rundem Bild
Vorname Nachname
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopieren
Linktext zu einer Website
Vorname Nachname
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
E-MailE-Mail in Zwischenablage kopierenLinktext
Medienecho
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.
Social Media & Podcast
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.
Shortfacts
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.
Zitate
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.
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.
Zitate mit einer Person
-
CopyrightTaglineEine Lüge ist wie ein Schneeball: Je länger man ihn wälzt, desto größer wird er.
Martin Luther, Mönch und TheologieprofessorLinktext
Zitate mit mehreren Personen
-
CopyrightTaglineEine Lüge ist wie ein Schneeball: Je länger man ihn wälzt, desto größer wird er.
Martin Luther, Mönch und TheologieprofessorLinktext -
CopyrightTaglineWas mich nicht umbringt, macht mich stärker.
Friedrich Nietzsche, Philologe und PhilosophLinktext -
CopyrightTaglineWas wir wissen, ist ein Tropfen, was wir nicht wissen, ein Ozean.
Isaac Newton, UniversalgelehrterLinktext
Call to Action
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:
Hinweise: Bei der Variante in Universitätsblau ist der Button weiß. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.
Zahlen & Fakten
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.
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.
Zahlen & Fakten, Standard mit Linie
-
10Faktentitel
Dieser Fakt ist im Standardlayout - mit farbiger Linie.
-
200Faktentitel
Fakt Nummer zwei, andere Farbe.
-
450Faktentitel
Fakt Nummer drei, andere Farbe.
-
906Faktentitel
Fakt Nummer 4, andere Farbe.
Zahlen & Fakten, Standard vollflächig in Universitätsblau
-
10Faktentitel
Dieser Fakt ist im Standardlayout - mit universitätsblau hinterlegt.
-
200Faktentitel
Fakt Nummer zwei.
-
450Faktentitel
Fakt Nummer drei.
-
906Faktentitel
Fakt Nummer 4.
Zahlen & Fakten, Banner mit vollflächigem Hintergrundbild
Das ist die Variante im Banner-Layout mit einem vollfächigen Hintergrundbild.
-
70Faktentitel
Dieser Fakt ist im Banner Layout.
-
67Fakt
Dieser Fakt ist im Banner Layout.
-
23Fakt
Dieser Fakt ist im Banner Layout.