Badges

Design

Entwicklung

Badges als Hinweis

Unsere Empfehlung

<div class="sk-badge">
    Unsere Empfehlung
</div>

.sk-badge {
    height: 36px;
    width: auto;
    border-radius: 50px;
    background-color: #c9242c;
    color: #FFFFFF;
    font-family: "franklin_gothic_fs";
    font-weight: 300;
    line-height: 36px;
    text-align: center;
    padding: 0 20px;
    font-size: 16px;
    display: inline-block;
}

Dezent

Neu

<div class="sk-badge sk-badge-secondary">
    Neu
</div>

.sk-badge-secondary {
    height: 20px;
    background-color: #878787;
    line-height: 20px;
    padding: 0 10px;
    text-transform: uppercase;
}

Badges als Hinweis

Wir verwenden Badges, um dem Nutzer einen Hinweis zu einem besonderen Element zu geben. Hauptsächlich wird dieser dafür eingesetzt, von uns empfohlene Angebote im Abo-Shop zu kommunizieren.

Dezent

Manchmal ist es sinnvoll, den Badge in dezentem Grau zu verwenden, um dem Nutzer einen „sanfteren“ Hinweis zu geben.