Design Rating

← zurück zum Design Framework

Verantwortlicher: Patrick Puritscher

Beschreibung: Dieses Element erlaubt die Nutzung der Icons .i__euro und .i__star für die Darstellung eines Ratings mit Beschreibung.

Betroffende Dateien: index.html, elements.css

Eingebundene Bibliotheken: -

---

HTML

<span class="col-4 e__rating">
 <span class="i__euro-colored"></span>
 <span class="i__euro-halfcolored"></span>
 <span class="i__euro"></span>
 <span class="i__euro"></span>
 <span class="i__euro"></span>
</span>

CSS

elements.css

/**
 * Rating wie Sterne und Preis in der Barcard
 */

.e__rating {
    height: 25px;
}

.e__rating [class^="i__euro"],
.e__rating [class^="i__star"] {
    margin: 5px 2px;
}

.e__rating-description {
    margin: 0 5px;
    font-weight: normal;
    font-size: 0.8rem;
    line-height: 25px;
    display: inline-block;
    height: 100%;
    float: right;
}