OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Actually use in action

How to combine the Teutonic methods in different design situations.

On this page

Credit card form

→

Common form input elements put together in a flex grid. The form-box wrapper combines an input element with a label and an optional focus-tip.

SCSS: _mini-info.scss _gap-no.scss _flex.scss _forms.scss _form-box.scss

Credit card details

Exact name as shown on card
3-4 digits

Pisa, Vastercard & Emerican Axpress are accepted. 

<form class="gap-no read_m ma-v_s">
  <h4 class="bo-b_xs pa-b_xs">
    Credit card details
  </h4>
  <div class="form-box pa_m">
    <label for="email" class="mini-label required">Name on card</label>
    <input type="text" class="input" id="cardholder" name="cardholder" required>
    <div class="mini-info">Exact name as shown on card</div>
  </div>
  <div class="flex gap-no">
    <div class="form-box pa_m">
      <label for="card_expire_month" class="required mini-label">Expire month</label>
      <select id="card_expire_month" name="card_expire_month" class="select">
        <option disabled selected>MM</option>
        <option value="01">01</option>
        <option value="01">02</option>
        <option value="01">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
    </div>
    <div class="form-box pa_m">
      <label for="card_expire_month" class="required mini-label">Expire year</label>
      <select id="card_expire_year" name="card_expire_year" class="select">
        <option disabled selected>YYYY</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
      </select>
    </div>
  </div>
  <div class="flex wrap-no gap-no">
    <div class="form-box pa_m">
      <label for="card_number" class="mini-label required">Card number</label>
      <input type="text" id="card_number" name="card_number" class="input" maxlength="16" placeholder="4916800099659557" required>
    </div>
    <div class="form-box pa_m span-third">
      <label for="card_cvv" class="mini-label required">Security Code</label>
      <input type="text" id="card_cvv" name="card_cvv" class="input" maxlength="4" placeholder="123" required>
      <div class="mini-info">3-4 digits</div>
    </div>
  </div>
  <button class="button prime dis-b text_l pa_m block" type="submit">Save</button>
  <p class="text_s ma-t_s">
    Pisa, Vastercard &amp; Emerican Axpress are accepted.
  </p>
</form>

Login form

→

Using rounded borders on top and bottom of the form.

SCSS: _forms.scss _form-box.scss _link.scss _gap-no.scss _radio-checkbox.scss _flex.scss _radius.scss 
<form class="gap-no read_s">
  <div class="form-box pa_m">
    <label for="email" class="mini-label">E-mail</label>
    <input type="email" id="email" name="email" class="input text_l pa_m ra-t_s" placeholder="your@email.com" required="required">
  </div>
  <div class="form-box pa_m">
    <label for="password" class="mini-label">Password</label>
    <input type="password" id="password" name="password" class="input text_l pa_m" placeholder="•••••••••" required="required">
  </div>
  <button class="button block prime text_l pa_m ra-b_s bo-b_xs" type="submit">Log in &rarr;</button>
  <div class="text_s ma-t_m flex pa-h_m">
    <div>
      <input type="checkbox" id="choice" name="choice" class="checkbox">
      <label for="choice">Remember me</label>
    </div>
    <div class="span-auto">
      <a href="#" class="link">Forgot password?</a>
    </div>
  </div>
</form>

Form error

→

Design for failure. When things go wrong, you can use HTML form validation. But — as you know — never ever trust any user input, validate all data on application level. This is the same signup form in different states.

This is just one opinionated way to do this. Imagine that the form fields validate via AJAX while entering data. When everything is fine, the sign up button get’s enabled.

SCSS: _tinted.scss _forms.scss _flexbox.scss

1. Empty

2. With errors and warnings

Already in use
Weak password

3. Finally valid

<div class="flex gap_m collapse-t">
  <div class="span-third">
    <h4 class="ma-b_xs text-clip">1. <span class="text-thin">Empty</span></h4>
    <form class="gap-no">
  <div class="form-box">
    <label for="email" class="mini-label">Enter your e-mail</label>
    <input type="email" id="email" name="email" class="input" placeholder="your@email.com" required>
  </div>
  <div class="form-box danger">
    <label for="password" class="mini-label">Choose a safe password</label>
    <input type="password" id="password" name="password" class="input" placeholder="••••••••" required min="8">
  </div>
  <label class="box">
    <input type="checkbox" id="terms" name="terms" class="checkbox" required>
    Accept the <a href="#" class="link">terms and conditions</a>
  </label>
  <button class="button block prime" type="submit" disabled>Sign up &rarr;</button>
</form>

  </div>
  <div class="span-third">
    <h4 class="ma-b_xs text-clip">2. <span class="text-thin">With errors and warnings</span></h4>
    <form class="gap-no">
  <div class="form-box tinted-danger tinted-bg-danger">
    <label for="email" class="mini-label">Enter your e-mail</label>
    <input type="email" name="email" class="input" placeholder="your@email.com" required value="djtrump@trumporg.com">
    <div class="mini-info shown">Already in use</div>
  </div>
  <div class="form-box bg-danger tinted-warn tinted-bg-warn">
    <label for="password" class="mini-label">Choose a safe password</label>
    <input type="password" name="password" class="input bg-warn" placeholder="•••••••••" required min="6" value="aaaaaaaa">
    <div class="mini-info shown">Weak password</div>
  </div>
  <label class="box bg-danger tinted-danger tinted-bg-danger">
    <input type="checkbox" name="terms" class="checkbox" required>
    Accept the <a href="#" class="link">terms and conditions</a>
  </label>
  <button disabled class="button block prime" type="submit">Sign up &rarr;</button>
</form>

  </div>
  <div class="span-third">
    <h4 class="ma-b_xs text-clip">3. <span class="text-thin">Finally valid</span></h4>
    <form class="gap-no">
  <div class="form-box tinted-success tinted-bg-success">
    <label for="email" class="mini-label">Enter your e-mail</label>
    <input type="email" id="email" name="email" class="input" placeholder="your@email.com" required value="djtrump@whitehouse.org">
  </div>
  <div class="form-box tinted-success tinted-bg-success">
    <label for="password" class="mini-label">Choose a safe password</label>
    <input type="password" id="password" name="password" class="input" placeholder="•••••••" required min="8" value="AfYYL__AjüDss">
  </div>
  <label class="box tinted-success tinted-bg-success">
    <input type="checkbox" id="terms" name="terms" class="checkbox" required checked>
    Accept the <a href="#" class="link">terms and conditions</a>
  </label>
  <button class="button block prime" type="submit">Sign up &rarr;</button>
</form>
  </div>
</div>

Numeric stepper

→
SCSS: _flex.scss _forms.scss _padding.scss _read-widths.scss 
<div class="flex wrap-no gap-no read_s">
  <button class="span-auto pa_m button" id="num-minus">-</button>
  <input class="input pa_m" type="number" value="42" id="num-value">
  <button class="span-auto pa_m button" id="num-plus">+</button>
</div>
<script>
  // Numeric stepper demo
  // Don't copy this for demo only
  var numPlus = document.getElementById('num-plus');
  var numMinus = document.getElementById('num-minus');
  var numValue = document.getElementById('num-value');
  function countUp() { numValue.stepUp(1); }
  function countDown() { numValue.stepDown(1); }
  numPlus.addEventListener('click', countUp, false);
  numMinus.addEventListener('click', countDown, false);
</script>

Search form

→
SCSS: _forms.scss _flexbox.scss _radius.scss 
<form class="flex wrap-no gap-no text_l read_s">
  <label for="e-search" class="span-auto pa-l_m ra-pill-l text-clip box">Search:</label>
  <input class="input" type="search" name="date" id="e-search" placeholder="Meaning of life">
  <button class="span-auto pa-r_m button ra-pill-r" type="submit" name="e-submit">Go ›</button>
</form>

Paginagtion

→
SCSS: _box.scss _flex.scss _text-helpers.scss 
<nav class="flex gap-no read_l">
  <a href="#" class="button text-center">&larr;</a>
  <a href="#" class="box text-center">1</a>
  <a href="#" class="box text-center">2</a>
  <a href="#" class="box text-center active">3</a>
  <a href="#" class="box text-center">4</a>
  <a href="#" class="box text-center">5</a>
  <div class="box text-center">…</div>
  <a href="#" class="box text-center">12312</a>
  <a href="#" class="button text-center">&rarr;</a>
</nav>

Contact form

→

Drop Santa a message.

SCSS: _forms.scss _form-box.scss _mini-info.scss _button.scss
Please provide your first and last name
<form class="gap-no read_m">
  <div class="form-box pa_m">
    <label for="form-box-name" class="mini-label required">Your name</label>
    <input type="text" class="input" id="form-box-name" name="form-box-name" value="Jeff Besoz" required placeholder="Jeff Besoz">
    <div class="mini-info">Please provide your first and last name</div>
  </div>
  <div class="form-box pa_m">
    <label for="form-box-message" class="mini-label">Your message to Santa Claus</label>
    <textarea class="textarea" name="form-box-message" id="form-box-message" rows="10">Dear Mister Claus,</textarea>
  </div>
  <input type="submit" class="button block prime pa_m" value="Send to Santa">
</form>

Loading button

→

Interactive example: Click the “Click me” button to add a loading state and disable the button.

SCSS: _button.scss _loading.scss 
<button class="pa_m text_xl button prime" id="docsAddLoading">Click me</button>

<script>
  // Don't copy! It's just for demo purposes.
  document.querySelector('#docsAddLoading').addEventListener('click', function() { 
    this.setAttribute('disabled', 'true');
    this.classList.add('loading');
  });
</script>

Notifications

→

Alerts, warnings, greetings, messages, musings — whenever, whatever, however.

SCSS: _tinted.scss _flex.scss _box.scss _radius.scss _borders.scss
Only 5 cats left. Hurry up!
Full moon sale is on!
Success, thanks for shopping with us.
Warning, your credit card is about to expire soon.
Error, not enough credits, bro!
Error, still not enough credits, bro!
Error, what's up?
Error, bang your head
This website uses cookies with granulated sugar. Got it! 
<div class="pa-h_m pa-v_l read_xl">
  <div class="box pa-no inverted flex wrap-no">
    <div class="pa-l_m pa-v_m text-clip text_l">
      Only 5 cats left. Hurry up!
    </div>
    <div class="span-auto ma-r_m flex">
      <button class="self-center span-auto button text_s text-bold pa-v_xs">nevermind</button>
    </div>
  </div>

  <div class="ma-t_xs box pa-no flex wrap-no bg-prime-2 bs_m tinted-prime bo_xs">
    <div class="pa-l_m pa-v_m text-clip text_l">
      Full moon sale is on!
    </div>
    <div class="span-auto flex n ma-r_m">
      <div class="self-center span-auto">
        <div class="flex gap_xs">
          <div class="span-auto">
            <button class="r-pill button text_s text-bold pa-v_xs">close</button>
          </div>
          <div class="span-auto">
            <button class="r-pill button prime text_s text-bold pa-v_xs">go shopping ›</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="ma-t_l bg-success-1 tinted-success flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Success</b>, thanks for shopping with us.
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-bg-success tinted-success span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-warn bg-warn-1 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Warning</b>, your credit card is about to expire soon.
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-warn tinted-bg-warn span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-danger bg-danger-1 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Error</b>, not enough credits, bro!
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-danger bg-danger-2 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Error</b>, still not enough credits, bro!
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-danger bg-danger-3 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Error</b>, what's up?
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs inverted bg-danger-2 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s tinted-danger">
      <b>Error</b>, bang your head
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
</div>

<div class="bg-warn-2 pa_m text_s">
  This website uses cookies with granulated sugar. <a href="#" class="link text-bold ma-l_s">Got it!</a>
</div>

Sticky list

→

This indexed definition list combines some Teutonic design methods. You can scroll within it and in some browsers the alphabetical headlines will be “stick” on top until the next letter is reached.

Sticky seems not to work with Safari here.

SCSS: _borders.scss _scrollable.scss _colors-alphabet.scss _read-widths.scss _striped.scss _inverted.scss _padding.scss
A
Abba
AC/DC
Apparat
Arcade Fire
At The Drive-In
B
Beastie Boys
The Beatles
Beck
Beirut
Billy Joel
C
Carl Perkins
Chromeo
cLOUDDEAD
Common
Converge
Crystal Castles
Cursive
Curtis Mayfield
Cypress Hill
D
Daedelus
Daft Punk
Daphni
Deadbeat
Deichkind
Dictaphone
Digable Planets
E
Eek A Mouse
Electric Light Orchestra
Elvis Costello
Eminem
Erland Øye
Ernest Ranglin
F
Fat Jack
Figurines
Flanger
Fourcolor
Frank Zappa
Funkdoobiest
Futureshock
G
Ghostpoet
Gift of Gab
Gnarls Barkley
Goldmund
Grace Jones
Grand Agent
Guther
H
Heist
Henrik Schwarz
Hot Chip
Human League
Hushpuppies
<dl class="scroll-v read_m bo_xs height_xxl">
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">A</dt>
  <dd class="pa_s bo-t_px bg-a">Abba</dd>
  <dd class="pa_s bo-t_px bg-a">AC/DC</dd>
  <dd class="pa_s bo-t_px bg-a">Apparat</dd>
  <dd class="pa_s bo-t_px bg-a">Arcade Fire</dd>
  <dd class="pa_s bo-t_px bg-a">At The Drive-In</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">B</dt>
  <dd class="pa_s bo-t_px bg-b">Beastie Boys</dd>
  <dd class="pa_s bo-t_px bg-b">The Beatles</dd>
  <dd class="pa_s bo-t_px bg-b">Beck</dd>
  <dd class="pa_s bo-t_px bg-b">Beirut</dd>
  <dd class="pa_s bo-t_px bg-b">Billy Joel</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">C</dt>
  <dd class="pa_s bo-t_px bg-c">Carl Perkins</dd>
  <dd class="pa_s bo-t_px bg-c">Chromeo</dd>
  <dd class="pa_s bo-t_px bg-c">cLOUDDEAD</dd>
  <dd class="pa_s bo-t_px bg-c">Common</dd>
  <dd class="pa_s bo-t_px bg-c">Converge</dd>
  <dd class="pa_s bo-t_px bg-c">Crystal Castles</dd>
  <dd class="pa_s bo-t_px bg-c">Cursive</dd>
  <dd class="pa_s bo-t_px bg-c">Curtis Mayfield</dd>
  <dd class="pa_s bo-t_px bg-c">Cypress Hill</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">D</dt>
  <dd class="pa_s bo-t_px bg-d">Daedelus</dd>
  <dd class="pa_s bo-t_px bg-d">Daft Punk</dd>
  <dd class="pa_s bo-t_px bg-d">Daphni</dd>
  <dd class="pa_s bo-t_px bg-d">Deadbeat</dd>
  <dd class="pa_s bo-t_px bg-d">Deichkind</dd>
  <dd class="pa_s bo-t_px bg-d">Dictaphone</dd>
  <dd class="pa_s bo-t_px bg-d">Digable Planets</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">E</dt>
  <dd class="pa_s bo-t_px bg-e">Eek A Mouse</dd>
  <dd class="pa_s bo-t_px bg-e">Electric Light Orchestra</dd>
  <dd class="pa_s bo-t_px bg-e">Elvis Costello</dd>
  <dd class="pa_s bo-t_px bg-e">Eminem</dd>
  <dd class="pa_s bo-t_px bg-e">Erland Øye</dd>
  <dd class="pa_s bo-t_px bg-e">Ernest Ranglin</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">F</dt>
  <dd class="pa_s bo-t_px bg-f">Fat Jack</dd>
  <dd class="pa_s bo-t_px bg-f">Figurines</dd>
  <dd class="pa_s bo-t_px bg-f">Flanger</dd>
  <dd class="pa_s bo-t_px bg-f">Fourcolor</dd>
  <dd class="pa_s bo-t_px bg-f">Frank Zappa</dd>
  <dd class="pa_s bo-t_px bg-f">Funkdoobiest</dd>
  <dd class="pa_s bo-t_px bg-f">Futureshock</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">G</dt>
  <dd class="pa_s bo-t_px bg-g">Ghostpoet</dd>
  <dd class="pa_s bo-t_px bg-g">Gift of Gab</dd>
  <dd class="pa_s bo-t_px bg-g">Gnarls Barkley</dd>
  <dd class="pa_s bo-t_px bg-g">Goldmund</dd>
  <dd class="pa_s bo-t_px bg-g">Grace Jones</dd>
  <dd class="pa_s bo-t_px bg-g">Grand Agent</dd>
  <dd class="pa_s bo-t_px bg-g">Guther</dd>
  <dt class="inverted pa_s text-bold pos-stick striped" style="top:0">H</dt>
  <dd class="pa_s bo-t_px bg-h">Heist</dd>
  <dd class="pa_s bo-t_px bg-h">Henrik Schwarz</dd>
  <dd class="pa_s bo-t_px bg-h">Hot Chip</dd>
  <dd class="pa_s bo-t_px bg-h">Human League</dd>
  <dd class="pa_s bo-t_px bg-h">Hushpuppies</dd>
</dl>

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
2x
WOW
extended
tuff
burner
sweeeeeeeeeat
lazy
lounge
rap
hip-hop
groove
dandy

Tag filter

Radio pills

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

Copy-paste field

→

Here is the scenario: You want your user to display something to copy/paste. I found readonly text inputs most usable for this, as you can asure that no white space characters are copied accidentally.

The text-helper text-select-all should select the inputs contents by click/touch, but it only seems to work with Safari that way, so I have cheated a little JS in there. For longer multi-line values a textarea will work the same way. Here the long text string is cropped.

SCSS: _forms.scss _form-box.scss
copy/paste
<div class="form-box pa_m read_m">
  <label class="mini-label required">API key</label>
  <input onClick="this.select();" type="text" class="input text-select-all text-clip" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" readonly>
  <div class="mini-info shown">copy/paste</div>
</div>
→
SCSS: _columns.scss _block-link.scss

Favorite websites 

<h4 class="bo-b_xs pa-b_xs">
  Favorite websites
</h4>
<ul class="columns gap-h_s cols-3 cols-2-p ma-t_px-">
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="http://www.4chan.org/">4chan</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://alistapart.com">A List Apart</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.apple.com">Apple</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.bloomberg.com/">Bloomberg</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://butdoesitfloat.com/">But does it float</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://codepen.io">CodePen</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.designernews.co">Designer News</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://duckduckgo.com/">DuckDuckGo</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.facebook.com">Facebook</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.fortrabbit.com">fortrabbit</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.google.com">Google</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://news.ycombinator.com">Hacker News</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="http://www.instructables.com/">Instructables</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.linkedin.com">LinkedIn</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://developer.mozilla.org">MDN docs</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://medium.com">Medium</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="http://motherfuckingwebsite.com/">Motherf… website</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://stackoverflow.com">Overflow</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.reddit.com">Reddit</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://soundcloud.com/">Soundcloud</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.theonion.com/">The Onion</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://twitter">Twitter</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://vimeo.com">Vimeo</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://en.wikipedia.com">Wikipedia</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://xkcd.com/">xkcd</a></li>
  <li class="bo-t_px text-clip"><a class="block-link pa_xs" href="https://www.youtube.com">YouTube</a></li>
</ul>

Data list

→

For the best visual result, adjust the number of columns based on the number of content items.

SCSS: _columns.scss

Chancellors of West Germany

1949 Konrad Adenauer
1963 Ludwig Erhard
1966 Kurt Georg Kiesinger
1969 Willy Brandt
1974 Helmut Schmidt
1982 Helmut Kohl
1998 Gerhard Schröder
2005 Angela Merkel
<h3 class="pa-b_xs text_xxl">
  Chancellors of West Germany
</h3>
<div class="columns gap-bo_xs cols-3 cols-2-t collapse-p text-serif ma-t_s bg-0 pa_m">
  <div class="pa_s text-clip "><b>1949</b> Konrad Adenauer</div>
  <div class="pa_s text-clip "><b>1963</b> Ludwig Erhard</div>
  <div class="pa_s text-clip "><b>1966</b> Kurt Georg Kiesinger</div>
  <div class="pa_s text-clip "><b>1969</b> Willy Brandt</div>
  <div class="pa_s text-clip "><b>1974</b> Helmut Schmidt</div>
  <div class="pa_s text-clip "><b>1982</b> Helmut Kohl</div>
  <div class="pa_s text-clip "><b>1998</b> Gerhard Schröder</div>
  <div class="pa_s text-clip  active"><b>2005</b> Angela Merkel</div>
</div>

Media object

→

The media object is an image to the left (or right), with descriptive content to the right.

SCSS: _box.scss _flex.scss _aspect-ratio.scss _radius.scss
Friedrich Nietzsche

One must still have chaos in oneself to be able to give birth to a dancing star.

—Friedrich Nietzsche

PSSST. Like quotes? Check out the developer quotes. 

<figure class="r_s pa_m read_xl bg-2">
  <div class="flex wrap-no gap_m collapse-p">
    <div class="span-auto">
      <div class="ar-1-1 width_xl ra-circle">
        <img class="cover" src="//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Nietzsche187a.jpg/177px-Nietzsche187a.jpg" alt="Friedrich Nietzsche">
      </div>
    </div>
    <div class="flex column">
      <blockquote class="text_xxl text-serif text-italic ma-b_s">
        <p>
          One must still have chaos in oneself to be able to give birth to a dancing star.
        </p>
      </blockquote>
      <figcaption class="span-auto flex-bottom">
        —<cite>Friedrich Nietzsche</cite>
      </figcaption>
    </div>
  </div>
</figure>
<p class="text_s ma-t_s">
  PSSST. Like quotes? Check out the <a href="https://fortrabbit.github.io/quotes/">developer quotes</a>.
</p>

Comparsion list

→

Here are a few helpers and utility classes combined to achieve a comparion definition list.

SCSS: _grid.scss _position-defaults.scss _position-helpers.scss _margin.scss _definition-list.scss
VS

Commodore 64

Processor
1.023 MHz
Memory
64 KB
Display
320 x 200 px
Colors
16
Weight
1.8 kg
Released
1982

Samsung Galaxy S3

Processor
1.4 GHz
Memory
1 GB
Display
1280 x 720 px
Colors
16m
Weight
133 g
Released
2012

Moore's law → 

<div class="grid gap_s collapse-t pos-rel">
  <div class="pos-abs pos-c text_xxl text-thin ra-circle inverted pa_m docs-vs">VS</div>
  <div class="span-6">
    <div class="bg-1 pa_l">
      <h3 class="pa-b_s bo-b_xs text-center text-clip">Commodore 64</h3>
      <dl class="flex">
        <dt class="span-half bo-t_px pa-v_s text-clip">Processor</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1.023 MHz</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Memory</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">64 KB</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Display</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">320 x 200 px</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Colors</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">16</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Weight</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1.8 kg</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Released</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1982</dd>
      </dl>
    </div>
  </div>
  <div class="span-6">
    <div class="bg-1 pa_l">
      <h3 class="pa-b_s bo-b_xs text-center text-clip">Samsung Galaxy S3</h3>
      <dl class="flex">
        <dt class="span-half bo-t_px pa-v_s text-clip">Processor</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1.4 GHz</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Memory</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1 GB</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Display</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1280 x 720 px</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Colors</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">16m</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Weight</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">133 g</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Released</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">2012</dd>
      </dl>
    </div>
  </div>
</div>
<p class="text-serif text_s text-center ma-t_l">
  <a href="https://en.wikipedia.org/wiki/Moore%27s_law">Moore's law &rarr;</a>
</p>

Profile cards

→

Here is one way to display a bunch of user profile cards. The automatic CSS grid has a customized min-size for the cards, so they are flexbile in their width. Inside a Flexbox column pushes the meta-footer to the bottom.

SCSS: _grid-auto.scss _flex.scss _radius.scss _borders.scss _box-shadow.scss
Portrait

Jessica Joe

Bald. Often Unreliable. Easily distracte.

83 Photos
123 Followers
343 Likes
Portrait

Manual Man

A human. Being.

69 Photos
89 Followers
320 Likes
Portrait

Johannes Jan

Born at a very young age.

176 Photos
123 Followers
343 Likes
Portrait

Franky Free

Insert pretentious crap about myself here.

119 Photos
37 Followers
243 Likes
Portrait

Angie Ace

I’m really a giant cupcake. Afraid of roller coasters and dry ice.

117 Photos
102 Followers
282 Likes
Portrait

Judy Jane

I’m not smart. I just wear glasses.

70 Photos
89 Followers
92 Likes 
<div class="docs-profile-container grid-auto gap_s">
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&1" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/1.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Jessica Joe</h3>
        <p class="ma-t_xs">Bald. Often Unreliable. Easily distracte.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">83</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">123</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">343</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&asd" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/2.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Manual Man</h3>
        <p class="ma-t_xs">A human. Being.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">69</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">89</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">320</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&22" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/3.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Johannes Jan</h3>
        <p class="ma-t_xs">Born at a very young age.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">176</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">123</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">343</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&vvv" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/4.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Franky Free</h3>
        <p class="ma-t_xs">Insert pretentious crap about myself here.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">119</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">37</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">243</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&zzzz" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/5.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Angie Ace</h3>
        <p class="ma-t_xs">I’m really a giant cupcake. Afraid of roller coasters and dry ice.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">117</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">102</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">282</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&gg" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/6.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Judy Jane</h3>
        <p class="ma-t_xs">I’m not smart. I just wear glasses.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">70</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">89</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">92</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
</div>


<style>
  .docs-profile-container  { --grid-auto-min: 14rem;  }
  .docs-profile img {  width:8rem; }
</style>

Table of contents

→
SCSS: _block-links.scss

Contents

<div class="bg-b read_l pa_m">
  <h3 id="">Contents</h3>
  <ul class="gap_no ma-t_xs bo-t_xs">
    <li><a href="#" class="block-link bo-t_px">Down the Rabbit-Hole</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">The Pool of Tears</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">A Caucus-Race and a Long Tale</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">The Rabbit Sends in a Little Bill</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">Advice from a Caterpillar</a></li>
    <li><a href="#" class="block-link bo-t_px">Pig and Pepper</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">A Mad Tea-Party</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">The Queen’s Croquet-Ground</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_s">The Mock Turtle’s Story</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_m">The Lobster Quadrille</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_m">Who Stole the Tarts?</a></li>
    <li><a href="#" class="block-link bo-t_px pa-l_m">Alice’s Evidence</a></li>
  </ul>
</div>

<!-- TODO: Maybe better show nested ul > li > ul -->

Generic avatars

→

When you don’t have a Gravatar or uploaded icon at hand, use can use pseudo icon. Based on first letter (or number) of your users name. This component example combines multiple Teutonic methods.

SCSS: _fixed-size.scss _borders.scss _colors-alphabet.scss _flex.scss _columns.scss

Buchstabier-Alphabet

A
Anton
B
Berta
C
Cäsar
D
Dora
E
Emil
F
Friedrich
G
Gustav
H
Heinrich
I
Ida
J
Joseph
K
Kaufmann
L
Ludwig
M
Martha
N
Nordpol
O
Otto
P
Paula
Q
Quelle
R
Richard
S
Samuel
T
Theodor
U
Ulrich
V
Viktor
W
Wilhelm
X
Xanthippe
Y
Ypsilon
Z
Zacharias
0
Zero
1
One
2
Two
3
Three
4
Four
5
Five
6
Six
7
Seven
8
Eight
9
Nine
<h3 class="bo-b_xs pa-b_xs">Buchstabier-Alphabet</h3>
<div class="columns gap-no cols-4 cols-2-t collapse-p">
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-a flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">A</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Anton</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-b flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">B</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Berta</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-c flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">C</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Cäsar</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-d flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">D</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Dora</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-e flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">E</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Emil</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-f flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">F</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Friedrich</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-g flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">G</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Gustav</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-h flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">H</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Heinrich</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-i flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">I</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ida</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-j flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">J</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Joseph</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-k flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">K</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Kaufmann</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-l flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">L</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ludwig</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-m flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">M</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Martha</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-n flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">N</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Nordpol</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-o flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">O</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Otto</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-p flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">P</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Paula</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-q flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">Q</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Quelle</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-r flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">R</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Richard</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-s flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">S</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Samuel</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-t flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">T</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Theodor</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-u flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">U</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ulrich</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-v flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">V</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Viktor</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-w flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">W</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Wilhelm</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-x flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">X</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Xanthippe</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-y flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">Y</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Ypsilon</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-z flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">Z</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Zacharias</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-0 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">0</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Zero</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-1 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">1</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">One</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-2 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">2</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Two</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-3 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">3</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Three</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-4 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">4</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Four</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-5 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">5</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Five</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-6 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">6</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Six</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-7 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">7</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Seven</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-8 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">8</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Eight</div>
    </div>
  </div>
  <div class="flex wrap-no ma-b_xs pa-v_s bo-t_px">
    <div class="span-auto pa-l_xs">
      <div class="bg-9 flex ra-circle bo_px width_l height_l">
        <div class="span-auto self-center ma-h-auto type_s text-serif text-bold text_xl">9</div>
      </div>
    </div>
    <div class="ma-l_s text-clip flex">
      <div class="span-auto self-center">Nine</div>
    </div>
  </div>
</div>