Stacks

Types

Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.

<span class="s-bling">
    <span class="v-visible-sr">…</span>
</span>
<span class="s-bling s-bling__gold">
    <span class="v-visible-sr">…</span>
</span>
<span class="s-bling s-bling__silver">
    <span class="v-visible-sr">…</span>
</span>
<span class="s-bling s-bling__bronze">
    <span class="v-visible-sr">…</span>
</span>

Example	Class	Description
default bling	`.s-bling`	A general bling shape used for reputation, notifications or other.
gold bling	`.s-bling` `.s-bling__gold`	The "gold" award bling shape.
silver bling	`.s-bling` `.s-bling__silver`	The "silver" award bling shape.
bronze bling	`.s-bling` `.s-bling__bronze`	The "bronze" award bling shape.

Filled

Section titled Filled

Use the filled bling style to represent a specific achievement badge or to display the total count of badges a user has earned.

<span class="s-bling s-bling__filled">…</span>
<span class="s-bling s-bling__filled s-bling__rep">…</span>
<span class="s-bling s-bling__filled s-bling__activity">…</span>
<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` `.s-bling__filled`	A general bling used for information, status, labels or other.
rep bling	`.s-bling` `.s-bling__filled` `.s-bling__rep`	A “rep” bling used for general reputation points.
activity bling	`.s-bling` `.s-bling__filled` `.s-bling__activity`	An activity bling to signal real-time events and draw attention.
gold bling	`.s-bling` `.s-bling__filled` `.s-bling__gold`	A "gold" award bling.
silver bling	`.s-bling` `.s-bling__filled` `.s-bling__silver`	A "silver" award bling.
bronze bling	`.s-bling` `.s-bling__filled` `.s-bling__bronze`	A "bronze" award bling.

Sizes

Section titled Sizes

A bling component has a default size. To change the bling’s size, apply one of the following sizing classes along with the base .s-bling class.

<span class="s-bling s-bling__filled s-bling__sm">…</span>
<span class="s-bling s-bling__filled">…</span>
<span class="s-bling s-bling__filled 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.

Sections

Bling

Types

Filled

Sizes