/

Badges


Headings mit Badges

H1 mit Badge

H2 mit Badge

H3 mit Badge

H4 mit Badge

H5 mit Badge
H6 mit Badge
<h1>H1 mit <span class="badge bg-secondary">Badge</span></h1>
<h2>H2 mit <span class="badge bg-secondary">Badge</span></h2>
<h3>H3 mit <span class="badge bg-secondary">Badge</span>")
<h4>H4 mit <span class="badge bg-secondary">Badge</span></h4>
<h5>H5 mit <span class="badge bg-secondary">Badge</span></h5>
<h6>H6 mit <span class="badge bg-secondary">Badge</span></h6>
H5H1(H5String("H1 mit "), UIMBadge(["bg-secondary"], "Badge"))
H5H2(H5String("H2 mit "), UIMBadge(["bg-secondary"], "Badge"))
H5H3(H5String("H3 mit "), UIMBadge(["bg-secondary"], "Badge"))
H5H4(H5String("H4 mit "), UIMBadge(["bg-secondary"], "Badge"))
H5H5(H5String("H5 mit "), UIMBadge(["bg-secondary"], "Badge"))
H5H6(H5String("H6 mit "), UIMBadge(["bg-secondary"], "Badge"))

Buttons mit Badges

Notifications 10
<button class="btn btn-secondary">Notifications <span class="badge bg-light text-dark">10</span>")
UIMButton(["btn-secondary"], H5String("Notifications "), UIMBadge(["bg-light", "text-dark"], "10"))

Buttons mit accessible Badges

Profile3unread messages

Hintergrundfarben

PrimarySecondarySuccessDangerWarningInfoLightDark
UIMBadge(["bg-primary"], "Primary"), 
    UIMBadge(["bg-secondary"], "Secondary"), 
    UIMBadge(["bg-success"], "Success"), 
    UIMBadge(["bg-danger"], "Danger"), 
    UIMBadge(["bg-warning text-dark"], "Warning"), 
    UIMBadge(["bg-info"], "Info"), 
    UIMBadge(["bg-light", "text-dark"], "Light"), 
    UIMBadge(["bg-dark"], "Dark")

Pill badges

PrimarySecondarySuccessDangerWarningInfoLightDark
UIMBadge(["rounded-pill", "bg-primary"], "Primary"),
    UIMBadge(["rounded-pill", "bg-secondary"], "Secondary"),
    UIMBadge(["rounded-pill", "bg-success"], "Success"),
    UIMBadge(["rounded-pill", "bg-danger"], "Danger"),
    UIMBadge(["rounded-pill", "bg-warning", "text-dark"], "Warning"),
    UIMBadge(["rounded-pill", "bg-info"], "Info"),
    UIMBadge(["rounded-pill", "bg-light", "text-dark"], "Light"),
    UIMBadge(["rounded-pill", "bg-dark"], "Dark")