Eckbanderole und Badge in CSS (Ribbon und Badge)
Wähle Stil, Text und Ecke. Die Banderole besteht aus nur einem Element und passt sich der Textgröße an.
So geht’s„Bestseller“ in der Ecke der Karte
Verfügbar auf: 
Eckbanderole und Badge in CSS (Ribbon und Badge): wofür es gut ist
Eine Banderole in der Ecke hebt den meistgewählten Tarif, das neue Produkt oder das Angebot hervor, ohne den Rest der Karte zu ändern. Wähle zwischen diagonaler Banderole, rundem Badge, Etikett oder gefaltetem Streifen, dem Text, der Ecke, den Farben und der Größe.
Der Code kommt mit der Beispielkarte und dem CSS der Banderole, die aus nur einem Element besteht: Bei der diagonalen schneidet die Karte den Überstand mit overflow hidden ab. Die Vorschau zeigt das Ergebnis sofort, und die Seite erklärt, wann welcher Stil passt.
So geht’s
- Wähle Stil und Text.
- Passe Ecke, Farben und Größe an.
- Kopiere den Code.
Wann nutzen
- Hervorgehobener Tarif in einer Preistabelle.
- Neues Produkt oder Angebot.
- Rabatt-Badge auf Fotos.
Häufige Fragen
Wie wird die Banderole in der Ecke abgeschnitten?
Die Karte bekommt overflow: hidden und position: relative.
Lesen Screenreader die Banderole?
Ja, denn der Text steht im HTML. Wiederholt das Badge nur etwas, das schon auf der Karte steht, kannst du die Banderole mit aria-hidden="true" markieren, damit sie nicht doppelt angesagt wird.
Welchen Stil nutzen?
Die diagonale Banderole fällt am meisten auf und passt zu hervorgehobenen Tarifen. Das runde Badge eignet sich für Rabatte ('-20%') auf Produktfotos, und das Etikett ist am dezentesten, gut für Listen mit vielen Elementen.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.