---
title: "Badge: Kleine Grafiken für große Wirkung auf Webseiten"
url: "https://web.destination.one/destinationbase/badge"
description: "Entdecke, wie Du Badge-Elemente mit Icon, Bild oder GIF gezielt einsetzt. Erfahre alles zu Größen, Hover-Effekten, Verlinkung und TYPO3-Integration inkl. Live-Demo."
language: "de"
breadcrumb: "Root > Startseite > destination.base > Badge"
keywords:
  - "Badge"
  - "Webdesign Element"
  - "Grafik"
  - "Icon"
  - "Bild"
  - "animiertes GIF"
  - "SVG"
  - "Hover-Effekt"
  - "Verlinkung"
  - "TYPO3"
  - "Conversionfarbe"
  - "Responsive Design"
  - "Webseiten Gestaltung"
---

Badge
=====

Kleine Grafik, große Wirkung

 

Badgeinfo

**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.

 

Filmklappe neben der Überschrift Live Demo

Live-Demo
---------

 

 

### Beispiel A:

Badge mit Icon und Verlinkung
Badge Ausrichtung: rechts

### Beispiel B:

Badge mit Bild
Badge Ausrichtung: mittig

### Beispiel C:

Badge mit animiertem GIF
Badge Ausrichtung: links

 

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

 

### Beispiel A:

Badge in Conversionfarbe mit Icon

### Beispiel B:

Badge mit Bild und Verlinkung

### Beispiel C:

Badge mit animiertem GIF

 

Badge in Größe L
----------------

 

### Beispiel A:

Badge in Conversionfarbe, mit Icon und Link

### Beispiel B:

Badge mit Bild

### Beispiel C:

Badge mit animiertem GIF und Verlinkung