Skip to main content
Sections

Bling is used to indicate award type in badges, topbar, and user cards.

Use bling to indicate the type of award.

<span class="s-bling s-bling__gold"></span>
<span class="s-bling s-bling__silver"></span>
<span class="s-bling s-bling__bronze"></span>
Example Class Description
default bling
.s-bling
A “default” bling.
rep bling
.s-bling .s-bling__rep
A “rep” bling.
activity bling
.s-bling .s-bling__activity
A “activity” bling.
gold bling
.s-bling .s-bling__gold
A “gold” bling.
silver bling
.s-bling .s-bling__silver
A “silver” bling.
bronze bling
.s-bling .s-bling__bronze
A “bronze” bling.

Use filled version of the bling.

<span class="s-bling s-bling__filled s-bling__gold"></span>
<span class="s-bling s-bling__filled s-bling__silver"></span>
<span class="s-bling s-bling__filled s-bling__bronze"></span>
Example Class Description
default bling
.s-bling
A “default” bling.
rep bling
.s-bling .s-bling__rep
A “rep” bling.
activity bling
.s-bling .s-bling__activity
A “activity” bling.
gold bling
.s-bling .s-bling__gold
A “gold” bling.
silver bling
.s-bling .s-bling__silver
A “silver” bling.
bronze bling
.s-bling .s-bling__bronze
A “bronze” bling.

Use different sizes of the bling.

<span class="s-bling s-bling__filled s-bling__gold s-bling__sm"></span>
<span class="s-bling s-bling__filled s-bling__gold"></span>
<span class="s-bling s-bling__filled s-bling__gold s-bling__lg"></span>
Example Class Description
sm bling
.s-bling .s-bling__sm
A “sm” bling.
default bling
.s-bling
A “default” bling.
lg bling
.s-bling .s-bling__lg
A “lg” bling.
Deploys by Netlify