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" />

<!-- 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>

<!-- 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>

<!-- with prefix -->
<div class="ga-tag label prefix" data-prefix="{prefix value}">
  { Tag Contents }
</div>
<!-- with suffix -->
<div class="ga-tag label suffix" data-suffix="{suffix value}">    
  { Tag Contents }
</div>

<!-- 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) -->
<div class="ga-tag kbd">{ Tag Contents }</div>

<!-- Round: only label type -->
<div class="ga-tag label round">    
  { Tag Contents }
</div>
<div class="ga-tag label round">    
  <i class="icon left xi-icon" />    
  { Tag Contents }
</div>

<div class="ga-tags">
  <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>

<div class="ga-tags attached">
  <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>

<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>

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

<!-- red, orange, yellow, light-green, light-blue, blue,
 deep-blue, deep-purple, purple, brown, gray -->
<div class="ga-tag label { Colors }">{ Tag Contents }</div>
<div class="ga-tag label { Colors }-light">{ Tag Contents }</div>