Tag

상태 표시나 필터에 사용하는 compact한 라벨 요소.

기본

Standard

Label

Tag

<!-- Label Type -->
<div class="ga-tag label">{ Tag Contents }</div>
<!-- Line Type -->
<div class="ga-tag line" />
<!-- Dot Type -->
<div class="ga-tag dot" />

icon (only label type)

Left

Right

Users

Update

New

Sale

<!-- Left -->
<div class="ga-tag label">
    <i class="icon left xi-icon" />
    { Tag Contents }
</div>
<!-- Right -->
<div class="ga-tag label">
    <i class="icon right xi-icon" />
    { Tag Contents }
</div>

Pointing

Left

Right

Down

<!-- Left -->
<div class="ga-tag label pointing left">
    <i class="icon left xi-angle-left" />
    { Tag Contents }
</div>
<!-- Right -->
<div class="ga-tag label pointing right">
    <i class="icon right xi-angle-right" />
    { Tag Contents }
</div>
<!-- Up -->
<div class="ga-tag label pointing up">
    <i class="icon right xi-angle-up" />
    { Tag Contents }
</div>
<!-- Down -->
<div class="ga-tag label pointing down">
    <i class="icon right xi-angle-down" />
    { Tag Contents }
</div>

kbd

Enter

Space

Command

K

<!-- kbd (Key Enter) -->
<div class="ga-tag kbd enter">
    { Tag Contents }
</div>
<!-- kbd (Key Space) -->
<div class="ga-tag kbd space">
    { Tag Contents }
</div>
<!-- kbd (Key Command - Meta) -->
<div class="ga-tag kbd meta cmd">
    { Tag Contents }
</div>
<!-- kbd (Key S) -->
<div class="ga-tag kbd">
    { Tag Contents }
</div>

Hover Effect

blue

deep blue

deep purple

purple

<div class="ga-tags one-of-a-kind">
    <div class="ga-tag label">Tag 1</div>
    <div class="ga-tag label">Tag 2</div>
    <div class="ga-tag label">Tag 3</div>    
</div>

Brand & Status Colors

Primary

Secondary

Success

Info

Danger

Attention

Importance

<!-- primary, secondary, success, danger, info, attention, importance -->
<div class="ga-tag label { Brand | Status }">{ Tag Contents }</div>

Colors

Red

Orange

Yellow

Light Green

Light Blue

Blue

Deep Blue

Deep Purple

Purple

Brown

Gray

Red