Badge

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

Base

Badge0

Badge 11

Badge 1010

Badge NewN

Badge Update

Badge In

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

Type

Float10

Mark

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

Text

FirstF

NEWNew

UPDATEUpdate

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

Shadow

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

Align

Left30000

Center30000

Right30000

<!-- @align: left | center | right -->
<div class="target-element">
  <span class="ga-badge float align-{@align}">{ Badge Contents }</span>
</div>

Colors

red

orange

yellow

lightgreen

green

lightblue

blue

deepblue

deeppurple

purple

brown

gray

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