Badge

Kleine Grafik, große Wirkung

Sprechblase mit dem Wort Info

Worum geht's?
Ein Badge-Element auf einer Webseite ist eine Art visuelles oder grafisches Element, das ganz unterschiedlich angewendet werden kann: von einem Symbol, das eine Überschrift bekräftigt bis hin zu einem vertrauensstiftenden Qualitätssymbol.

Glühbirne neben der Überschrift Gut zu Wissen

Gut zu wissen
Ein Badge-Element kann ein Foto, ein Vektorbild oder sogar eine animierte GIF-Grafik sein, um die Aufmerksamkeit der Nutzer:innen zu erhöhen.

Bei Hover über das Bild wird dieses herangezoomt, der Titel wird, sofern gepflegt, angezeigt. Für SVG Dateien wird der Titel nur angezeigt, wenn innerhalb der Bilddatei selbst ein Titel vergeben ist.

Bei Klick auf das Bild wird auf die im TYPO3 Backend hinterlegte Seite gewechselt, sofern ein Link eingepflegt wurde.
 

 

Live-Demo

Badge in Größe S

Beispiel A:

Badge mit Icon und Verlinkung

Beispiel C:

Badge mit animiertem GIF

Animierter Kolibri
© Hier steht das copyright

Badge in Größe M (Standard-Größe)

Beispiel A:

Badge mit Icon

Beispiel B:

Badge mit Bild und Verlinkung

Beispiel C:

Badge mit animiertem GIF

Animierter Kolibri
© Hier steht das copyright

Badge in Größe L

Beispiel A:

Badge mit Icon

Beispiel B:

Badge mit Bild

Alternativer Text
© Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Beispiel C:

Badge mit animiertem GIF und Verlinkung