Styleguide

Teaserboxen

Implementierung von Teaserboxen

Teaser sind ein wesentlicher Bestandteil der Navigation einer Website. Sie bieten die Möglichkeit eines direkten Zugangs zu einer beliebigen Ebene innerhalb der Navigation. Im Gegensatz zu einem normalen Link oder Menüpunkt werden Teaser mit einem Kurztext und optional mit einem Bildmotiv versehen. So können wichtige Themen vorgestellt und in den Vordergrund gebracht werden.

Dies gilt es zu beachten:

Teaserboxen werden generell in der Navigation rechts angelegt
Das begleitende Bild wird auf mindestens 283 x 120 Pixel scalliert
maximal soll das begleitende Bild die Höhe von 250 Pixeln nicht überschreiten
Das Zielfenster sollte stets in einem "neuen Fenster" öffnen

Farbliche Zugehörigkeit:

graue Boxen werden für contentbegleitende Inhalte verwendet
blaue Boxen werden für temporäre Neuigkeiten verwendet
grüne Boxen werden interne, wiederkehrende Themen verwendet

Reihenfolge der Teaserboxen:

graue Teaserboxen
blaue Teaserboxen
grüne Teaserboxen

Teaserbox grau

Für contentbegleitende Inhalte

Graue Teaserboxen werden für die Themenbereiche Y verwendet. Der Text wir hierbei stets von einem Bild begleitet.

Das Bild wird dann auf die größe von 283 x 120 Pixel angepasst. Achten Sie bitte daher darauf, dass Sie das Bild über den Editor in das entsprechenden Format wandeln.

Teaserbox Blau

Für temporäre Neuigkeiten

Blaue Teaserboxen werden für die Themenbereiche X verwendet. Der Text wir hierbei stets von einem Bild begleitet.

Das Bild wird dann auf die größe von mindestens 283 x 120 Pixel angepasst. Die Höhe der Bilder können Sie frei bestimmen (ab 120px aufwärts) um so ebenfalls abweichende Bilder zu platzieren. Achten Sie bitte daher darauf, dass Sie das Bild über den Editor in das entsprechenden Format wandeln. Hier wurde der Ausschnitt mit Hilfe des Editors auf 283 x 250 angepasst.

Teaserbox Grün

Für Interne, wiederkehrende Inhalte

Grüne Teaserboxen werden für die Themenbereiche Z verwendet. Der Text wir hierbei stets von einem Bild begleitet.

Das Bild wird dann auf die Größe von mindestens 283 x 120 Pixel angepasst. Die Höhe der Bilder können Sie frei bestimmen (ab 120px aufwärts) um so ebenfalls abweichende Bilder zu platzieren, jedoch soll das zu platzierende Bild die Höhe von 250 Pixeln nicht überschreiten (auch wenn die technischen Gegebenheiten dies zulassen würden). Achten Sie bitte daher darauf, dass Sie das Bild über den Editor in das entsprechenden Format wandeln. Hier wurde der Ausschnitt des 283x 250 Pixel Bildes mit Hilfe des Editors auf angepasst.