Bauhaus New

Primary colours, circle, square and triangle on a visible black grid. For brands that want to show craft and design.

View full screen ↗

Thema 01 / geometrie

Bau
haus

Vorm volgt functie. Drie primaire kleuren, drie vormen en een raster dat je mag zien.

Palet · 8 tokens

achtergrond#F2EDE3

oppervlak#FFFFFF

tekst#111111

gedempt#5E5A52

lijn#111111 · 3px

accent#D7261E

accent-2#1F4FA8

signaal#F2B705

Type · Panchang / General Sans

AaRr

48Stoel
32Tafel B3
20Buisframe, gelast
15Verchroomd staal en gespannen canvas.
12Art. 1926-04

Componenten

Naam Frame

Op voorraadMaatwerkLaatste 3

Fauteuil

Clubfauteuil B3

Stalen buis Ø 22 mm, leer of canvas. Levertijd 6 weken.

€ 1.240Bekijk

KooistraCollectieOp maatAtelierJournaalContact

Meubelatelier · Delft sinds 1998

Buisstoelen, op maat gelast in Delft.

Elk frame wordt in ons atelier aan de Oude Delft gebogen en gelast. U kiest maat, kleur en bekleding.

Levertijd: 6 wk
Vanaf: € 485
Garantie: 10 jr

Past bij meubelmakers, architectenbureaus, galeries, ontwerpopleidingen, designwinkels.

How to use it

Paste the HTML where the themes should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Bauhaus · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tbh-thm"><div class="tbh-grid">
<div class="tbh-c tbh-intro">
  <p class="tbh-kick">Thema 01 / geometrie</p>
  <h3 class="tbh-title">Bau<br>haus</h3>
  <p class="tbh-mood">Vorm volgt functie. Drie primaire kleuren, drie vormen en een raster dat je mag zien.</p>
  <div class="tbh-geo" aria-hidden="true"><i class="tbh-geo__o"></i><i class="tbh-geo__sq"></i><i class="tbh-geo__tri"></i><i class="tbh-geo__bar"></i></div>
</div>
<div class="tbh-c tbh-pal">
  <p class="tbh-lbl">Palet · 8 tokens</p>
  <div class="tbh-sws">
    <div class="tbh-sw"><span style="background:var(--tbh-bg)"></span><b>achtergrond</b><code>#F2EDE3</code></div>
    <div class="tbh-sw"><span style="background:var(--tbh-surface)"></span><b>oppervlak</b><code>#FFFFFF</code></div>
    <div class="tbh-sw"><span style="background:var(--tbh-text)"></span><b>tekst</b><code>#111111</code></div>
    <div class="tbh-sw"><span style="background:var(--tbh-muted)"></span><b>gedempt</b><code>#5E5A52</code></div>
    <div class="tbh-sw"><span class="tbh-sw--line"></span><b>lijn</b><code>#111111 · 3px</code></div>
    <div class="tbh-sw"><span class="tbh-sw--o" style="background:var(--tbh-accent)"></span><b>accent</b><code>#D7261E</code></div>
    <div class="tbh-sw"><span style="background:var(--tbh-accent-2)"></span><b>accent-2</b><code>#1F4FA8</code></div>
    <div class="tbh-sw"><span class="tbh-sw--tri"></span><b>signaal</b><code>#F2B705</code></div>
  </div>
</div>
<div class="tbh-c tbh-type">
  <p class="tbh-lbl">Type · Panchang / General Sans</p>
  <div class="tbh-aa">Aa<span>Rr</span></div>
  <ol class="tbh-scale">
    <li><code>48</code><span class="tbh-d" style="font-size:34px">Stoel</span></li>
    <li><code>32</code><span class="tbh-d" style="font-size:24px">Tafel B3</span></li>
    <li><code>20</code><span style="font-size:20px;font-weight:600">Buisframe, gelast</span></li>
    <li><code>15</code><span style="font-size:15px">Verchroomd staal en gespannen canvas.</span></li>
    <li><code>12</code><span style="font-size:12px;letter-spacing:.14em;text-transform:uppercase">Art. 1926-04</span></li>
  </ol>
</div>
<div class="tbh-c tbh-ui">
  <p class="tbh-lbl">Componenten</p>
  <div class="tbh-btns"><button class="tbh-btn tbh-btn--p" type="button">Bestellen</button><button class="tbh-btn tbh-btn--s" type="button">Op maat</button><button class="tbh-btn tbh-btn--g" type="button">Specificaties</button><button class="tbh-btn tbh-btn--o" type="button" aria-label="Volgende">&rarr;</button></div>
  <div class="tbh-form">
    <label class="tbh-f"><span>Naam</span><input type="text" placeholder="Wim Kooistra"></label>
    <label class="tbh-f"><span>Frame</span><select><option>Chroom</option><option>Mat zwart</option><option>Signaalrood</option></select></label>
  </div>
  <div class="tbh-badges"><span class="tbh-bd"><i class="tbh-bd__o"></i>Op voorraad</span><span class="tbh-bd"><i class="tbh-bd__sq"></i>Maatwerk</span><span class="tbh-bd"><i class="tbh-bd__tri"></i>Laatste 3</span></div>
</div>
<div class="tbh-c tbh-card">
  <div class="tbh-card__top"><span>B3</span><i></i></div>
  <div class="tbh-card__body"><p class="tbh-lbl">Fauteuil</p><h4>Clubfauteuil B3</h4><p>Stalen buis Ø 22 mm, leer of canvas. Levertijd 6 weken.</p><div class="tbh-card__ft"><strong>€ 1.240</strong><a href="#" class="tbh-lnk">Bekijk</a></div></div>
</div>
<div class="tbh-c tbh-hero">
  <div class="tbh-nav"><strong class="tbh-logo"><i></i>Kooistra</strong><span>Collectie</span><span>Op maat</span><span>Atelier</span><span>Journaal</span><span>Contact</span></div>
  <div class="tbh-hero__in">
    <div class="tbh-hero__txt"><p class="tbh-kick">Meubelatelier · Delft sinds 1998</p><h4>Buisstoelen, op maat gelast in Delft.</h4><p>Elk frame wordt in ons atelier aan de Oude Delft gebogen en gelast. U kiest maat, kleur en bekleding.</p><div class="tbh-btns"><button class="tbh-btn tbh-btn--p" type="button">Bekijk de collectie</button><button class="tbh-btn tbh-btn--g" type="button">Plan een atelierbezoek</button></div></div>
    <dl class="tbh-facts"><div><dt>Levertijd</dt><dd>6 wk</dd></div><div><dt>Vanaf</dt><dd>€ 485</dd></div><div><dt>Garantie</dt><dd>10 jr</dd></div></dl>
    <div class="tbh-hero__art" aria-hidden="true"><i class="tbh-a1"></i><i class="tbh-a2"></i><i class="tbh-a3"></i><i class="tbh-a4"></i></div>
  </div>
</div>
<div class="tbh-c tbh-fit"><strong>Past bij</strong> meubelmakers, architectenbureaus, galeries, ontwerpopleidingen, designwinkels.</div>
</div></div>
</div>

/* Bauhaus · NedDev · eigen werk. */
/* fonts (Fontshare): panchang@500,700,800 + general-sans@400,500,600 */
.tbh-thm{--tbh-bg:#F2EDE3;--tbh-surface:#FFFFFF;--tbh-text:#111111;--tbh-muted:#5E5A52;--tbh-line:#111111;--tbh-accent:#D7261E;--tbh-accent-2:#1F4FA8;--tbh-signal:#F2B705;--tbh-radius:0;--tbh-rule:3px;--tbh-display:'Panchang',sans-serif;--tbh-body:'General Sans',sans-serif;container:tbh/inline-size;background:var(--tbh-bg);color:var(--tbh-text);font-family:var(--tbh-body);padding:22px}
.tbh-thm,.tbh-thm *{box-sizing:border-box}
.tbh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--tbh-rule);background:var(--tbh-line);border:var(--tbh-rule) solid var(--tbh-line)}
.tbh-c{background:var(--tbh-bg);padding:22px;min-width:0}
.tbh-intro{grid-column:span 7;position:relative;overflow:hidden;min-height:250px}
.tbh-pal{grid-column:span 5;background:var(--tbh-surface)}
.tbh-type{grid-column:span 4;background:var(--tbh-surface)}
.tbh-ui{grid-column:span 5}
.tbh-card{grid-column:span 3;padding:0;display:flex;flex-direction:column;background:var(--tbh-surface)}
.tbh-hero{grid-column:span 12;padding:0}
.tbh-fit{grid-column:span 12;background:var(--tbh-signal);font-size:14px;padding:12px 22px}
.tbh-kick,.tbh-lbl{margin:0 0 12px;font:600 11px/1.2 var(--tbh-body);letter-spacing:.16em;text-transform:uppercase;color:var(--tbh-muted)}
.tbh-title{margin:0;font:800 clamp(48px,7.4cqw,96px)/.88 var(--tbh-display);letter-spacing:-.02em;text-transform:uppercase;position:relative;z-index:1}
.tbh-mood{max-width:300px;margin:18px 0 0;font-size:16px;line-height:1.45;position:relative;z-index:1}
.tbh-geo{position:absolute;right:0;top:0;bottom:0;width:46%}
.tbh-geo i{position:absolute;display:block}
.tbh-geo__o{width:190px;height:190px;border-radius:50%;background:var(--tbh-accent);right:40px;top:28px}
.tbh-geo__sq{width:120px;height:120px;background:var(--tbh-accent-2);right:0;bottom:0}
.tbh-geo__tri{width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid var(--tbh-signal);left:10px;bottom:0}
.tbh-geo__bar{width:var(--tbh-rule);background:var(--tbh-line);top:0;bottom:0;right:120px}
.tbh-sws{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px}
.tbh-sw{display:flex;flex-direction:column;gap:3px;min-width:0}
.tbh-sw span{display:block;height:58px;border:2px solid var(--tbh-line);margin-bottom:6px}
.tbh-sw .tbh-sw--o{border-radius:50%;width:58px}
.tbh-sw .tbh-sw--line{background:repeating-linear-gradient(90deg,var(--tbh-line) 0 3px,var(--tbh-surface) 3px 14px)}
.tbh-sw .tbh-sw--tri{border:0;background:var(--tbh-signal);clip-path:polygon(50% 0,100% 100%,0 100%)}
.tbh-sw b{font-size:12px;font-weight:600}
.tbh-sw code{font:500 11px/1 'JetBrains Mono',monospace;color:var(--tbh-muted)}
.tbh-aa{font:800 76px/1 var(--tbh-display);display:flex;gap:16px;align-items:baseline;border-bottom:var(--tbh-rule) solid var(--tbh-line);padding-bottom:10px;margin-bottom:10px}
.tbh-aa span{font:400 60px/1 var(--tbh-body);color:var(--tbh-accent-2)}
.tbh-scale{list-style:none;margin:0;padding:0}
.tbh-scale li{display:grid;grid-template-columns:30px 1fr;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid #d8d2c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbh-scale code{font:500 10px 'JetBrains Mono',monospace;color:var(--tbh-muted)}
.tbh-d{font-family:var(--tbh-display);font-weight:700;text-transform:uppercase;line-height:1.1}
.tbh-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tbh-btn{font:600 14px/1 var(--tbh-body);padding:14px 20px;border:var(--tbh-rule) solid var(--tbh-line);border-radius:var(--tbh-radius);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.tbh-btn--p{background:var(--tbh-accent);color:#fff}
.tbh-btn--p:hover{box-shadow:6px 6px 0 var(--tbh-line);transform:translate(-3px,-3px)}
.tbh-btn--s{background:var(--tbh-surface);color:var(--tbh-accent-2);border-color:var(--tbh-accent-2)}
.tbh-btn--s:hover{background:var(--tbh-accent-2);color:#fff}
.tbh-btn--g{background:none;border-color:transparent;padding-left:0;padding-right:0;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.tbh-btn--g:hover{text-decoration-color:var(--tbh-accent)}
.tbh-btn--o{width:46px;height:46px;padding:0;border-radius:50%;background:var(--tbh-signal);font-size:18px}
.tbh-btn--o:hover{transform:rotate(-45deg)}
.tbh-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.tbh-f{min-width:0;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tbh-f input,.tbh-f select{font:500 15px var(--tbh-body);padding:11px 12px;border:var(--tbh-rule) solid var(--tbh-line);border-radius:0;background:var(--tbh-surface);color:var(--tbh-text);outline:0;min-width:0}
.tbh-f input:focus,.tbh-f select:focus{border-color:var(--tbh-accent-2);box-shadow:inset 0 -6px 0 var(--tbh-signal)}
.tbh-badges{display:flex;flex-wrap:wrap;gap:8px}
.tbh-bd{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 10px 6px 8px;border:2px solid var(--tbh-line);background:var(--tbh-surface)}
.tbh-bd i{display:block;width:10px;height:10px}
.tbh-bd__o{border-radius:50%;background:var(--tbh-accent)}
.tbh-bd__sq{background:var(--tbh-accent-2)}
.tbh-bd__tri{background:var(--tbh-signal);clip-path:polygon(50% 0,100% 100%,0 100%);border:0}
.tbh-card__top{height:96px;background:var(--tbh-accent-2);position:relative;border-bottom:var(--tbh-rule) solid var(--tbh-line);overflow:hidden}
.tbh-card__top span{position:absolute;left:16px;bottom:8px;font:800 52px/1 var(--tbh-display);color:#fff}
.tbh-card__top i{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--tbh-signal)}
.tbh-card__body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.tbh-card__body h4{margin:0 0 6px;font:700 17px/1.15 var(--tbh-display);text-transform:uppercase}
.tbh-card__body p:not(.tbh-lbl){margin:0;font-size:14px;line-height:1.45;color:var(--tbh-muted)}
.tbh-card__ft{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums}
.tbh-lnk{color:var(--tbh-text);font-weight:600;font-size:14px;text-decoration:none;border-bottom:3px solid var(--tbh-accent)}
.tbh-lnk:hover{background:var(--tbh-accent);color:#fff}
.tbh-nav{display:flex;align-items:center;gap:26px;padding:14px 22px;border-bottom:var(--tbh-rule) solid var(--tbh-line);font-size:14px;font-weight:500;background:var(--tbh-surface);flex-wrap:wrap}
.tbh-logo{display:flex;align-items:center;gap:8px;font:800 15px var(--tbh-display);text-transform:uppercase;margin-right:auto}
.tbh-logo i{width:16px;height:16px;border-radius:50%;background:var(--tbh-accent);box-shadow:12px 0 0 -2px var(--tbh-accent-2)}
.tbh-hero__in{display:grid;grid-template-columns:1.3fr .5fr 1fr;min-height:220px}
.tbh-hero__txt{padding:20px 22px}
.tbh-hero__txt h4{margin:0 0 12px;font:700 clamp(24px,3.2cqw,38px)/1.02 var(--tbh-display);text-transform:uppercase;max-width:15ch}
.tbh-hero__txt p:not(.tbh-kick){margin:0 0 18px;font-size:15px;line-height:1.5;max-width:44ch}
.tbh-hero__txt .tbh-btns{margin:0}
.tbh-facts{margin:0;display:flex;flex-direction:column;border-left:var(--tbh-rule) solid var(--tbh-line);border-right:var(--tbh-rule) solid var(--tbh-line)}
.tbh-facts div{flex:1;padding:14px 16px;border-bottom:var(--tbh-rule) solid var(--tbh-line)}
.tbh-facts div:last-child{border-bottom:0;background:var(--tbh-signal)}
.tbh-facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tbh-muted)}
.tbh-facts dd{margin:4px 0 0;font:800 24px/1 var(--tbh-display);font-variant-numeric:tabular-nums}
.tbh-hero__art{position:relative;overflow:hidden;background:var(--tbh-surface)}
.tbh-hero__art i{position:absolute;display:block}
.tbh-a1{left:18%;top:18%;width:52%;aspect-ratio:1;border-radius:50%;border:14px solid var(--tbh-line)}
.tbh-a2{left:18%;right:18%;bottom:20%;height:14px;background:var(--tbh-line)}
.tbh-a3{right:18%;bottom:20%;width:14px;height:52%;background:var(--tbh-accent)}
.tbh-a4{left:0;bottom:0;width:30%;height:20%;background:var(--tbh-accent-2)}
@container tbh (max-width:900px){.tbh-intro,.tbh-pal{grid-column:span 12}.tbh-type,.tbh-ui{grid-column:span 6}.tbh-card{grid-column:span 12}}
@container tbh (max-width:620px){.tbh-grid>.tbh-c{grid-column:1/-1}.tbh-geo{opacity:.35;width:70%}.tbh-sws{grid-template-columns:repeat(4,1fr);gap:10px 8px}.tbh-form{grid-template-columns:1fr}.tbh-hero__in{grid-template-columns:1fr}.tbh-facts{flex-direction:row;border:0;border-top:var(--tbh-rule) solid var(--tbh-line)}.tbh-facts div{border-bottom:0;border-right:var(--tbh-rule) solid var(--tbh-line);padding:10px}.tbh-facts dd{font-size:18px}.tbh-hero__art{height:170px;border-top:var(--tbh-rule) solid var(--tbh-line)}.tbh-nav span{display:none}.tbh-thm{padding:12px}.tbh-sws{grid-template-columns:1fr 1fr}.tbh-sw{display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center}.tbh-sw span,.tbh-sw .tbh-sw--o{grid-row:span 2;width:44px;height:44px;margin:0}.tbh-hero__txt h4{font-size:21px}.tbh-facts dd{font-size:15px}.tbh-scale li{white-space:normal}}
@media (prefers-reduced-motion:reduce){.tbh-btn{transition:none}}

More themes

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →