Teutonic CSS

Tags

←

Use existing methods to display tags in various styles and forms.

SCSS: _flex.scss _tinted.scss _box.scss _radio-checkbox.scss

Simple passive tags

cool

old

doggy

bummer

cliffhanger

shaggy

monster

double

WOW

extended

tuff

burner

sweeeeeeeeeat

lazy

lounge

rap

hip-hop

groove

dandy

Tag filter

Success

Warn

Danger

Radio pills

More Much more Much much more

<div class="read_l">
  <h3 class="ma-b_s">Simple passive tags</h3>
  <div class="flex gap_xs">
    <div class="span-auto"><div class="pa_s bg-1">cool</div></div>
    <div class="span-auto"><div class="pa_s bg-1">old</div></div>
    <div class="span-auto"><div class="pa_s bg-1">doggy</div></div>
    <div class="span-auto"><div class="pa_s bg-1">bummer</div></div>
    <div class="span-auto"><div class="pa_s bg-1">cliffhanger</div></div>
    <div class="span-auto"><div class="pa_s bg-1">shaggy</div></div>
    <div class="span-auto"><div class="pa_s bg-1">monster</div></div>
    <div class="span-auto"><div class="pa_s bg-1">double</div></div>
    <div class="span-auto"><div class="pa_s bg-1">2x</div></div>
    <div class="span-auto"><div class="pa_s bg-1">WOW</div></div>
    <div class="span-auto"><div class="pa_s bg-1">extended</div></div>
    <div class="span-auto"><div class="pa_s bg-1">tuff</div></div>
    <div class="span-auto"><div class="pa_s bg-1">burner</div></div>
    <div class="span-auto"><div class="pa_s bg-1">sweeeeeeeeeat</div></div>
    <div class="span-auto"><div class="pa_s bg-1">lazy</div></div>
    <div class="span-auto"><div class="pa_s bg-1">lounge</div></div>
    <div class="span-auto"><div class="pa_s bg-1">rap</div></div>
    <div class="span-auto"><div class="pa_s bg-1">hip-hop</div></div>
    <div class="span-auto"><div class="pa_s bg-1">groove</div></div>
    <div class="span-auto"><div class="pa_s bg-1">dandy</div></div>
  </div>
  <h3 class="ma-t_m ma-b_s">
    Tag filter
  </h3>
  <div class="flex gap_s">
    <div class="span-auto">
      <label class="box pa_s tinted-success tinted-bg-success">
        <input type="checkbox" class="checkbox"> Success
      </label>
    </div>
    <div class="span-auto">
      <label class="box pa_s tinted-warn tinted-bg-warn">
        <input type="checkbox" class="checkbox"> Warn
      </label>
    </div>
    <div class="span-auto">
      <label class="box pa_s tinted-danger tinted-bg-danger">
        <input type="checkbox" class="checkbox"> Danger
      </label>
    </div>
  </div>
  <h3 class="ma-t_m ma-b_s">Radio pills</h3>
  <div class="grid-auto">
    <label class="box ra-pill pa_s text-clip">
      <input type="radio" class="radio" name="docs-radio-filter"> More
    </label>
    <label class="box ra-pill pa_s text-clip">
      <input type="radio" class="radio" name="docs-radio-filter"> Much more
    </label>
    <label class="box ra-pill pa_s text-clip">
      <input type="radio" class="radio" name="docs-radio-filter"> Much much more
    </label>
  </div>
</div>