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.
Teaser können Inhalte und Verweise zu verschiedenen Themen enthalten. Teaserboxen angeordnet in einer Reihe sollten immer die gleiche Höhe haben. Dabei ist die Hinterlegung der Bilddateien im gleichen Format entscheidet, für die gleiche Höhe der Teaser.
Croissant carrot cake cheesecake muffin cheesecake. Sweet cake soufflé sesame snaps topping fruitcake gingerbread. Bear claw macaroon chupa chups candy canes bear claw sweet gingerbread toffee.
Teaser die neben einem Bildmotiv noch einen Textabsatz nutzen, können im Inhaltsbereich platziert werden. Dabei wird die Breite durch die gewählte Seitenaufteilung bestimmt. Ein Teaser nimmt dabei immer 100% der verfügbaren Breite ein. Es kann für das Bildmotiv zwischen zwei Größen gewählt werden. Das Bild kann ein Viertel oder die Hälfte der verfügbaren Breite einnehmen. Der gesamte Teaser mit Überschrift (h3), Text und Bild ist verlinkt und führt zur Folgeseite.
Teaserboxen werden verwendet um Inhalte mit Bildmotiven oder Grafiken anzukündigen. Bei den Teaserboxen wird oberhalb dem Bildmotiv ein farbiger Headerbalken zur Platzierung einer Überschrift ergänzt. Die Hintergrundfarbe entspricht dabei der 20% Abstufung der gewählten Portalfarbe.
Auf dem Bildmotiv kann eine Zusatzinformation platziert werden. Diese erscheint in weißer Schrift über dem Bild. Dazu wird ein Overlay, das zu 90% Transparenz der Portalfarbe entspricht unter den Text gelegt. Bei Mouseover wird die Zusatzinformation ausgeblendet und der Nutzer kann das Bildmotiv vollständig sehen.
Der Textlink wird in den Teaser-Footer gelegt.
Die Gesamthöhe einer Teaserbox wird von der Höhe des Bildmotives sowie der Länge des Textlinks bestimmt. Ein Textlink kann über mehrere Zeilen, so dass sich der Footer entsprechend erhöht. Die Hintergrundfarbe des Footers sind ebenfalls die 10% Abstufung der Portalfarbe. Die gesamte Teaserbox mit Überschrift (h2), Bild und Footer ist verlinkt und führt zur Folgeseite.
Im responsiven Verhalten ändern Teaserboxen und Teaser ihren grundlegenden Aufbau nicht. Sie passen sich jedoch in der Breite an die Spalten an.
