Typischer Seiteninhalt

Dieses Element ist eines der wichtigsten und am häufigsten verwendeten Inhaltselemente. Es bietet verschiedene Möglichkeiten, um Bilder, Videos und Texte ansprechend auf der Seite zu präsentieren. Prinzipiell gibt es vier verschiedene Layout-Varianten, um Bild/Video in Kombination mit Text einzusetzen:

• Bild/Video oben mittig mit Button
• Bild/Video unten mittig ohne Button
• Bild/Video neben dem Text rechts mit Button
• Bild/Video neben dem Text links ohne Button

Hinweise: Es ist kein umfließendes Textelement vorgesehen. Für Medien kann optional eine Klick-Vergrößerung eingestellt und bei Videos ein Auto-play aktiviert werden. Um einen Button anzeigen zu lassen, markieren Sie den zu verlinkenden Text und wählen im Text-Editor den Stil “Button Secondary”. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden.

Anleitung zum Element Text & Medien

Zur mediengerechten Präsentation von Bildern gibt es neben dem Text & Medien Element auch einen eigenes Element in zwei verschiedenen Layout-Varianten:

• Slider
• Galerie

Hinweise: Bei beiden Elementen können die einzelnen Bilder angeklickt und in einer Lightbox angezeigt werden. Die Lightbox wird mittig in der Seite auf einer Hintergrundfläche angezeigt. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Galerie & Slider

Infoboxen dienen dazu, wichtige Informationen hervorzuheben und kurz und prägnant zu transportieren. Innerhalb der Infoboxen können Listen, Textelemente und Links angezeigt werden. Es gibt drei Layout-Varianten:

• Grauer Hintergrund, ohne Rahmen
• Grauer Hintergrund, mit Rahmen in Universitätsblau
• Hintergrund in Universitätsblau

Hinweise: Bei der Variante mit Hintergrund in Universitätsblau ist die Schrift weiß. Die Unterstreichung bei Links ist dennoch blau. Beim vollflächigen Teaser ist das Info-Icon weiß, während es bei den anderen Varianten in Universitätsblau dargestellt wird. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Infobox

Ein einfaches Element zur Einbindung von Inhalten zum Herunterladen, das in zwei unterschiedlichen Layout-Varianten zur Verfügung steht:

• Nur Dateiname
• Dateiname und Vorschaubild

Hinweise: Wenn die Anzahl der Downloads mit Bild die Contentbreite überschreitet, wird ein Slider verwendet. Downloads ohne Bild werden untereinander angeordnet. Um Benutzer*innen ein klares, übersichtliches Erscheinungsbild zu geben, wird in diesem Fall auf die Unterstreichung der Links verzichtet. Es können optional Infos wie Dateigröße und -name eingeblendet werden. Das Element kann alternativ mit einem grauen Hintergrund dargestellt werden. 

Anleitung zum Element Downloads

Teaser stellen ein wichtiges Element zur Strukturierung und Präsentation von Inhalten dar und dienen auch als Navigationselement, das User*innen durch die Seite leitet. Sie ermöglichen vielseitige Darstellungsoptionen - in weiß, vollflächig in Universitätsblau, mit Farbbalken oben oder ohne, mit Icon oder ohne, mit Bild oder ohne, mit Link-Button oder ohne - und können in einem Layout von einer bis zu vier Spalten und damit in verschiedenen Größen eingesetzt werden. Hier einige Beispiele:

• Teaser weiß, 1 Spalte, mit Bild & Button
• Teaser weiß mit Balken, 2 Spalten, mit Bild & Button
• Teaser weiß & vollflächig in Universitätsblau, 3 Spalten, ohne Bild & Button
• Teaser weiß, mit & ohne Balken, 4 Spalten, mit Bild, ohne Button
• Teaser weiß mit & ohne Balken, 4 Spalten, ohne Bild, ohne Button, nur Überschrift
• Teaser weiß & vollflächig in Universitätsblau, mit Icon, mit & ohne Balken, 4 Spalten, ohne Bild & Button
• Teaser weiß, mit Links, 4 Spalten, mit & ohne Balken, ohne Bild

Hinweise: Für Balken und Icons kann aus Farben des Corporate Design (Universitätsblau, Rot, Orange, Gelb, Hellgrün, Mintgrün, Lila) gewählt werden. Eine Kombination von Teaser mit Farbbalken, ohne Farbbalken und mit Icons innerhalb eines Elements wird nicht empfohlen. Um maximale Flexibilität zu ermöglichen, kann auf den Teasertext verzichtet werden. Wenn für den Link im Feld “Linktext” ein Text eingetragen wird, wird dieser automatisch als Button dargestellt. Mobil werden Teaser untereinander dargestellt.

Anleitung zum Element Teaser

Vorlage Teaser-Seite mit unterschiedlichen Varianten