Labels

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Standard Labels

Default Primary Secondary CTA Accent Dark Light

Code Example Shortcut: z-label-name

<span class="label">Default</span>
<span class="label bg-primary">Primary</span>
<span class="label bg-secondary">Secondary</span>
<span class="label bg-cta">CTA</span>
<span class="label bg-accent">Accent</span>
<span class="label bg-dark">Dark</span>
<span class="label bg-light">Light</span>

Icon Labels

Member Price ERROR WARNING SUCCESS

Code Example

<span class="label bg-secondary"><i class="zenicon-local-offer down-3 left-2"></i> Member Price</span>
<span class="label bg-red-darkest ml-2"><i class="zenicon-error down-3 left-2"></i> ERROR</span>
<span class="label bg-orange-light "><i class="zenicon-error-outline down-3 left-2"></i> WARNING</span>
<span class="label bg-green-darker"><i class="zenicon-check-circle down-3 left-2"></i> SUCCESS</span>

Nested Labels

SPECIALBlack Friday Sale. 20% off. Read More

Code Example

<div class="card theme-cta text-height-lg">
  <div>
    <span class="label up-1">SPECIAL</span>
    <span class="ml-4">
      Black Friday Sale. 20% off. 
      <a class="ml-1 mr-2"> Read More</a>
    </span>
  </div>
</div>

Corner Labels

BETA V1

Code Example

<div class="card theme-light">
  <div>
    <span class="label position-top-right">BETA</span>
    <span class="label bg-secondary-minimal position-top-right">V1</span>
  </div>
</div>

Top Center Labels

SAVE $235

Code Example

<div class="card theme-light">
  <div>
    <span class="label position-top-right">BETA</span>
    <span class="label bg-secondary-minimal position-top-right">V1</span>
  </div>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.