1 #Badge Badge

5 Default diameter size 22px and default color grey
5 Default with hover
Html
<i class="sf-badge">5</i> Default diameter size 22px and default color grey <br />
<i class="sf-badge -hover">5</i> Default with hover <br />
Default badge size and default icon size
Default badge size and L icon size
Badge size S and icon size S
Html
<i class="sf-badge -white -icon"><i class="sf-fa sf-fa-question-circle sf-icon"></i></i> Default badge size and default icon size <br />
<i class="sf-badge -white -icon"><i class="sf-fa sf-fa-check-circle sf-icon -size-l"></i></i> Default badge size and L icon size <br />
<i class="sf-badge -white -icon -size-s"><i class="sf-fa sf-fa-info-circle sf-icon -size-s"></i></i> Badge size S and icon size S <br />

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-badge.-{add, -add-variation, -edit-variation}

5 White badge with border and hover
5 White badge with border

EN Light blue background background color
EN Light blue background background color and hover

BG Dark blue background background color
BG Dark blue background background color and hover

Bulgaria on three seas Badge with floating text
Html
<i class="sf-badge -add">5</i> White badge with border and hover <br />
<i class="sf-badge -add -hover">5</i> White badge with border <br /><br />
<i class="sf-badge -add-variation -sf-txt-small">EN</i> Light blue background background color <br />
<i class="sf-badge -add-variation -hover -sf-txt-small">EN</i> Light blue background background color and hover <br /><br />
<i class="sf-badge -edit-variation -sf-txt-small">BG</i> Dark blue background background color <br />
<i class="sf-badge -edit-variation -hover -sf-txt-small">BG</i> Dark blue background background color and hover <br /><br />
<i class="sf-badge -add-variation -floating-txt -sf-txt-small"><span class="sf-badge__animated-content">Bulgaria on three seas</span></i> Badge with floating text