Badge

Small visual indicators showing counts or statuses.

기본

Badge0

Badge 11

Badge 1010

Badge NewN

Badge Update

Badge In

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

타입

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>

원과 함꼐

Counting Star

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

텍스트 사용

FirstF

NEWNew

UPDATEUpdate

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

그림자

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

정렬

Left30000

Center30000

Right30000

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

색상

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>