1 #Badge Badge
1.1 #Badge.default Default Badge
.sf-badge
5 Default diameter size 22px and default color grey
5 Default with hover
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 />
1.2 #Badge.icon Badge with Icon
.sf-badge.-icon
Default badge size and default icon size
Default badge size and L icon size
Badge size S and icon size S
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 />
1.3 #Badge.languages Badge for Languages
.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
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