Plugins styles

Colors

Fonts

Display

Title L

Title M

Title S

Headline L

Headline M

Headline S

Body large

Body medium

Body small

Caption

Code font

<p class="display">Display</p>
<p class="title-l">Title L</p>
<p class="title-m">Title M</p>
<p class="title-s">Title S</p>
<p class="headline-l">Headline L</p>
<p class="headline-m">Headline M</p>
<p class="headline-s">Headline S</p>
<p class="body-l">Body large</p>
<p class="body-m">Body medium</p>
<p class="body-s">Body small</p>
<p class="caption">Caption</p>
<p class="code-font">Code font</p>

Spacing

Icons

<span class="icon icon-arrow-bottom"></span>
<span class="icon icon-arrow-top"></span>
<span class="icon icon-arrow-right"></span>
<span class="icon icon-arrow-left"></span>
<span class="icon icon-close"></span>
<span class="icon icon-close-l"></span>
<span class="icon icon-delete"></span>
<span class="icon icon-add"></span>
<span class="icon icon-remove"></span>
<span class="icon icon-search"></span>
<span class="icon icon-copy"></span>
<span class="icon icon-more"></span>
<span class="icon icon-loading"></span>
<span class="icon icon-help"></span>
<span class="icon icon-info"></span>
<span class="icon icon-show"></span>
<span class="icon icon-hide"></span>
<span class="icon icon-lock"></span>
<span class="icon icon-unlock"></span>
<span class="icon icon-download"></span>

Select

<div class="form-group">
 <label class="select-label-hidden" for="select-1">Which is your favorite animal?</label>
 <select class="select" id="select-1">
  <option value="1">Quokka</option>
  <option value="2">Rabbit</option>
  <option value="3">Goat</option>
  <option value="4">Capybara</option>
 </select>
</div>
<div class="form-group">
 <label class="select-label-hidden" for="select-2">Which is your favorite animal?</label>
 <select class="select" id="select-2" disabled>
  <option value="1">Quokka</option>
  <option value="2">Rabbit</option>
  <option value="3">Goat</option>
  <option value="4">Capybara</option>
 </select>
</div>
<div class="form-group">
 <label class="select-label-hidden" for="select-1">Which is your favorite animal?</label>
 <select class="select" id="select-1">
  <option value="1">Quokka</option>
  <option value="2">Rabbit</option>
  <option value="3">Goat</option>
  <option value="4">Capybara</option>
 </select>
</div>
<div class="form-group">
 <label class="select-label-hidden" for="select-2">Which is your favorite animal?</label>
 <select class="select" id="select-2" disabled>
  <option value="1">Quokka</option>
  <option value="2">Rabbit</option>
  <option value="3">Goat</option>
  <option value="4">Capybara</option>
 </select>
</div>

Input

<div class="theme-group" data-theme="dark">
 <div class="form-group">
  <label class="input-label-hidden" for="input-1">This is the label</label>
  <input class="input" type="text" placeholder="Input dark theme" id="input-1"/>
 </div>
 <div class="form-group">
  <label class="input-label-hidden" for="input-2">This is the label</label>
  <input class="input success" type="text" placeholder="Input dark theme success" id="input-2"/>
 </div>
 <div class="form-group">
  <label class="input-label-hidden" for="input-3">This is the label</label>
  <input class="input error" type="text" placeholder="Input dark theme error" id="input-3"/>
 </div>
</div>
<div class="theme-group" data-theme="light">
 <div class="form-group">
  <label class="input-label-hidden" for="input-4">This is the label</label>
  <input class="input" type="text" placeholder="Input light theme" id="input-4"/>
 </div>
 <div class="form-group">
  <label class="input-label-hidden" for="input-5">This is the label</label>
  <input class="input success" type="text" placeholder="Input light theme success" id="input-5"/>
 </div>
 <div class="form-group">
  <label class="input-label-hidden" for="input-6">This is the label</label>
  <input class="input error" type="text" placeholder="Input light theme error" id="input-6"/>
 </div>
</div>

Buttons

Primary button

<div data-theme="dark">
 <button type="button" data-appearance="primary">Primary Dark</button>
 <button type="button" data-appearance="primary">Primary Dark destructive</button>
</div>
<div data-theme="light">
 <button type="button" data-appearance="primary">Primary Light</button>
 <button type="button" data-appearance="primary" data-variant="destructive">Primary Light destructive</button>
</div>

Secondary button

<div data-theme="dark">
 <button type="button" data-appearance="secondary">Secondary Dark</button>
</div>
<div data-theme="light">
 <button type="button" data-appearance="secondary">Secondary Light</button>
</div>

Checkox

<div data-theme="dark">
 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox1" value="checkbox_one" />
   <label for="checkbox1" class="checkbox-hidden">Dark checkbox</label>
 </div>

 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox2" value="checkbox_second" />
   <label for="checkbox2" class="body-small">Dark checkbox with label</label>
 </div> </div>
<div data-theme="light">
 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox3" value="third" />
   <label for="checkbox3" class="checkbox-hidden">Light checkbox</label>
 </div>

 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox4" value="checkbox_fourth" />
   <label for="checkbox4" class="body-small">Light checkbox with label</label>
 </div> </div>

Radio button

<div data-theme="dark">
 <div class="radio-container">
  <input type="radio" class="radio-input" id="quokka" name="animal" value="quokka">
  <label class="radio-label" for="quokka">quokka</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="capybara" name="animal" value="capybara">
  <label class="radio-label" for="capybara">capybara</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="goat" name="animal" value="goat">
  <label class="radio-label" for="goat">goat</label>
 </div>
</div>
<div data-theme="light">
 <div class="radio-container">
  <input type="radio" class="radio-input" id="rabbit" name="small-animals" value="rabbit">
  <label class="radio-label" for="rabbit">rabbit</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="mouse" name="small-animals" value="mouse">
  <label class="radio-label" for="mouse">mouse</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="chinchilla" name="small-animals" value="chinchilla">
  <label class="radio-label" for="chinchilla">chinchilla</label>
 </div>
</div>