Badge

카운트나 상태를 보여주는 작은 시각적 인디케이터.

Base

Badge0

Badge 11

Badge 1010

Badge NewN

Badge Update

Badge In

<div class="some element">
    <span class="ga-badge">{ Badge Contents }</span>
</div>

Type

Float10

Mark

<!-- Float Type -->
<div class="some element">
    <span class="ga-badge float">{ Badge Contents }</span>
</div>
 <!-- Mark Type -->
<div class="some element">
    <span class="ga-badge mark" />
</div>

Round

Counting Star

<div class="ga-button icon round">
    <i class="some icon" />
    <span class="ga-badge float">{ Badge Contents }</span>
</div>
<div class="ga-button icon round">
    Button Text
    <span class="ga-badge mark" />
</div>

Text

FirstF

NEWNew

UPDATEUpdate

<div class="some element">
    <span class="ga-badge float">{ Badge Text }</span>
</div>

Shadow

<div class="some element">
    <span class="ga-badge float">{ Badge Contents }</span>
</div>

Align

Left30000

Center30000

Right30000

<div class="some element">
    <span class="ga-badge float shadow align-left">{ Badge Contents }</span>
</div>

Colors

Red1

Orange2

Yellow3

Light Green4

Green5

Light Blue6

Blue7

Deep Blue8

Deep Purple9

Purple10

Brown11

Gray12

<!-- red, orange, yellow, light-green, light-blue, blue --> 
<!-- deep-blue, deep-purple, purple, brown, gray -->  
<div class="some element">
    <span class="ga-badge { Colors }">{ Badge Contents }</span>
</div>