Eco Groen New

Earthy leaf green, clay and sun yellow with leaf shapes, contour lines and an energy-label scale as recurring motif. For installers, energy advice, solar and sustainable building.

View full screen ↗

Thema 12 · duurzaam

Eco Groen

Aards en nuchter. Groen zoals het in de tuin staat, niet zoals het in een logo past. Cijfers die laten zien wat het oplevert.

A+++

A++

A+

A++ naD voor

Hybride warmtepomp · Leusden · 2 dagen montage

Palet

achtergrond#EEF0E6

oppervlak#FAFBF6

tekst#1C2B20

gedempt#5F6E61

lijn#CFD6C6

accent#2F6B3A

accent-2#B8794A

signaal#E9C23B

Rowan + Satoshi

Warmte, zuinig.

40Van gas af
22Terugverdientijd 7 jaar
16Wij regelen de ISDE-aanvraag.
12Erkend installateur

Koppen in Rowan 500, tekst in Satoshi 400 op 1,55. Cijfers altijd met eenheid: m³, kWh, euro per jaar.

Elementen

PostcodeBouwjaar woning

ISDE-subsidieBinnen 3 wekenGratis advies

Pakket

Hybride warmtepomp 5 kW

62% minder gas, gemiddeld 1.150 m³ per jaar

vanaf € 4.995 na subsidie

Van het gas af, zonder koude voeten.

Installaties sinds 2014: 2.340
Gemiddelde besparing: € 1.180 /jr
Werkgebied: Amersfoort e.o.

Past bij installateurs, energieadviseurs, zonnepaneelbedrijven, isolatiebedrijven, hoveniers, duurzame bouwers.

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.

<!-- Eco Groen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="teg-thm"><div class="teg-wrap">
<div class="teg-intro">
  <p class="teg-kick"><span class="teg-leaf" aria-hidden="true"></span>Thema 12 · duurzaam</p>
  <h3 class="teg-title">Eco Groen</h3>
  <p class="teg-mood">Aards en nuchter. Groen zoals het in de tuin staat, niet zoals het in een logo past. Cijfers die laten zien wat het oplevert.</p>
  <div class="teg-label" aria-label="Energielabel schaal">
    <div style="--w:36%;--c:#2F6B3A"><b>A+++</b></div><div style="--w:43%;--c:#3F7C3C"><b>A++</b></div><div style="--w:50%;--c:#5E9440"><b>A+</b></div><div style="--w:57%;--c:#93B24A"><b>A</b></div><div style="--w:64%;--c:#E9C23B"><b>B</b></div><div style="--w:71%;--c:#D99A3A"><b>C</b></div><div style="--w:78%;--c:#B8794A"><b>D</b></div>
    <span class="teg-label__arrow" style="--row:2;--at:43%">A++ na</span><span class="teg-label__arrow teg-label__arrow--old" style="--row:7;--at:78%">D voor</span>
  </div>
</div>
<div class="teg-photo" role="img" aria-label="Monteur plaatst een buitenunit van een warmtepomp tegen een bakstenen gevel"><span class="teg-photo__tag">Hybride warmtepomp · Leusden · 2 dagen montage</span></div>
<div class="teg-pal">
  <p class="teg-lbl">Palet</p>
  <div class="teg-chips">
    <div style="--c:var(--teg-bg)"><i></i><b>achtergrond</b><code>#EEF0E6</code></div>
    <div style="--c:var(--teg-surface)"><i></i><b>oppervlak</b><code>#FAFBF6</code></div>
    <div style="--c:var(--teg-text)"><i></i><b>tekst</b><code>#1C2B20</code></div>
    <div style="--c:var(--teg-muted)"><i></i><b>gedempt</b><code>#5F6E61</code></div>
    <div style="--c:var(--teg-line)"><i></i><b>lijn</b><code>#CFD6C6</code></div>
    <div style="--c:var(--teg-accent)"><i></i><b>accent</b><code>#2F6B3A</code></div>
    <div style="--c:var(--teg-accent-2)"><i></i><b>accent-2</b><code>#B8794A</code></div>
    <div style="--c:var(--teg-signal)"><i></i><b>signaal</b><code>#E9C23B</code></div>
  </div>
</div>
<div class="teg-type">
  <p class="teg-lbl">Rowan + Satoshi</p>
  <p class="teg-type__big">Warmte<em>,</em> zuinig.</p>
  <ul><li><code>40</code><span style="font:500 30px/1 var(--teg-display)">Van gas af</span></li><li><code>22</code><span style="font:500 20px/1.2 var(--teg-display)">Terugverdientijd 7 jaar</span></li><li><code>16</code><span style="font-size:15px">Wij regelen de ISDE-aanvraag.</span></li><li><code>12</code><span style="font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase">Erkend installateur</span></li></ul>
  <p class="teg-type__p">Koppen in Rowan 500, tekst in Satoshi 400 op 1,55. Cijfers altijd met eenheid: m³, kWh, euro per jaar.</p>
</div>
<div class="teg-ui">
  <p class="teg-lbl">Elementen</p>
  <div class="teg-btns"><button class="teg-btn teg-btn--p" type="button">Bereken uw besparing</button><button class="teg-btn teg-btn--s" type="button">Offerte</button><button class="teg-btn teg-btn--g" type="button">Hoe werkt het?</button></div>
  <div class="teg-fields"><label class="teg-f"><span>Postcode</span><input type="text" placeholder="3811 AB"></label><label class="teg-f"><span>Bouwjaar woning</span><select><option>1960 tot 1980</option><option>1980 tot 2000</option><option>na 2000</option></select></label></div>
  <div class="teg-badges"><span class="teg-bd teg-bd--g">ISDE-subsidie</span><span class="teg-bd teg-bd--y">Binnen 3 weken</span><span class="teg-bd">Gratis advies</span></div>
</div>
<div class="teg-card">
  <p class="teg-lbl">Pakket</p>
  <h4>Hybride warmtepomp 5 kW</h4>
  <div class="teg-meter"><span style="--p:62%"></span></div>
  <p class="teg-card__save"><b>62%</b> minder gas, gemiddeld 1.150 m³ per jaar</p>
  <p class="teg-card__price">vanaf <b>€ 4.995</b> <small>na subsidie</small></p>
</div>
<div class="teg-hero">
  <div class="teg-hero__nav"><strong><span class="teg-leaf" aria-hidden="true"></span>Groenwarmte</strong><span>Warmtepompen</span><span>Zonnepanelen</span><span>Isolatie</span><span>Subsidie</span><span>Over ons</span></div>
  <div class="teg-hero__in">
    <h4>Van het gas af, zonder koude voeten.</h4>
    <dl><div><dt>Installaties sinds 2014</dt><dd>2.340</dd></div><div><dt>Gemiddelde besparing</dt><dd>€ 1.180 <small>/jr</small></dd></div><div><dt>Werkgebied</dt><dd>Amersfoort e.o.</dd></div></dl>
  </div>
</div>
<p class="teg-fit"><b>Past bij</b> installateurs, energieadviseurs, zonnepaneelbedrijven, isolatiebedrijven, hoveniers, duurzame bouwers.</p>
</div></div>
</div>

/* Eco Groen · NedDev · eigen werk. */
/* fonts (Fontshare): rowan@400,500,600 + satoshi@400,500,700 */
.teg-thm{--teg-bg:#EEF0E6;--teg-surface:#FAFBF6;--teg-text:#1C2B20;--teg-muted:#5F6E61;--teg-line:#CFD6C6;--teg-accent:#2F6B3A;--teg-accent-2:#B8794A;--teg-signal:#E9C23B;--teg-radius:22px;--teg-leaf:0 60% 0 60%;--teg-display:'Rowan',serif;--teg-body:'Satoshi',sans-serif;container:teg/inline-size;color:var(--teg-text);font:400 14px/1.55 var(--teg-body);background:repeating-radial-gradient(ellipse 70% 55% at 30% 18%,transparent 0 34px,rgba(47,107,58,.09) 34px 35px) 0 0/100% 520px no-repeat,var(--teg-bg);padding:28px}
.teg-thm,.teg-thm *{box-sizing:border-box}
.teg-wrap{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;grid-template-areas:"intro intro photo photo" "pal type ui card" "hero hero hero hero" "fit fit fit fit";gap:16px}
.teg-intro{grid-area:intro;padding:8px 8px 0 4px}
.teg-photo{grid-area:photo;min-height:270px;border-radius:0 140px 0 140px;background:url('https://neddev.com/lab-media/thm-eco-groen-2.webp') 40% 50%/cover;position:relative}
.teg-photo__tag{position:absolute;left:16px;bottom:16px;background:var(--teg-surface);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:500}
.teg-pal{grid-area:pal}.teg-type{grid-area:type}.teg-ui{grid-area:ui}.teg-card{grid-area:card}.teg-hero{grid-area:hero}.teg-fit{grid-area:fit}
.teg-pal,.teg-type,.teg-ui,.teg-card{background:var(--teg-surface);border-radius:var(--teg-radius);padding:18px;min-width:0;border:1px solid var(--teg-line)}
.teg-kick,.teg-lbl{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 11px var(--teg-body);letter-spacing:.12em;text-transform:uppercase;color:var(--teg-accent)}
.teg-leaf{display:inline-block;width:14px;height:14px;border-radius:var(--teg-leaf);background:var(--teg-accent)}
.teg-title{margin:0;font:600 clamp(48px,6.4cqw,80px)/.95 var(--teg-display);letter-spacing:-.02em;color:var(--teg-accent)}
.teg-mood{margin:12px 0 16px;max-width:50ch;font-size:16px;color:var(--teg-muted)}
.teg-label{--k:1;position:relative;display:flex;flex-direction:column;gap:4px;max-width:440px}
.teg-label div{width:calc(var(--w) * var(--k));background:var(--c);height:18px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);display:flex;align-items:center;padding-left:8px}
.teg-label b{font:700 12px var(--teg-body);color:#fff}
.teg-label__arrow{position:absolute;white-space:nowrap;left:calc(var(--at) * var(--k) + 10px);top:calc((var(--row) - 1) * 22px);height:18px;display:flex;align-items:center;background:var(--teg-text);color:var(--teg-surface);font:700 11px var(--teg-body);padding:0 10px 0 16px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.teg-label__arrow--old{background:transparent;color:var(--teg-muted);border:1px dashed var(--teg-muted);clip-path:none;padding:0 8px}
.teg-chips{display:grid;grid-template-columns:1fr;gap:0}
.teg-chips div{display:grid;grid-template-columns:30px 1fr auto;column-gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--teg-line);min-width:0}
.teg-chips div:last-child{border-bottom:0}
.teg-chips i{width:30px;height:30px;border-radius:var(--teg-leaf);background:var(--c);border:1px solid rgba(28,43,32,.15);transition:transform .3s}
.teg-chips div:hover i{transform:rotate(90deg)}
.teg-chips b{font-size:13px;font-weight:500;line-height:1.2}
.teg-chips code{font:500 10px 'JetBrains Mono',monospace;color:var(--teg-muted)}
.teg-type__big{margin:0 0 6px;font:500 40px/1 var(--teg-display);color:var(--teg-text)}
.teg-type__big em{font-style:normal;color:var(--teg-signal)}
.teg-type ul{list-style:none;margin:0;padding:0}
.teg-type li{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:baseline;padding:4px 0;border-top:1px solid var(--teg-line);white-space:nowrap;overflow:hidden}
.teg-type__p{margin:12px 0 0;font-size:13px;color:var(--teg-muted);background:var(--teg-bg);border-radius:14px;padding:10px 12px}
.teg-type code{font:500 9px 'JetBrains Mono',monospace;color:var(--teg-muted)}
.teg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.teg-btn{font:700 14px/1 var(--teg-body);padding:12px 16px;border-radius:14px 4px 14px 4px;border:1.5px solid var(--teg-accent);cursor:pointer;transition:background .2s,color .2s,border-radius .3s}
.teg-btn--p{background:var(--teg-accent);color:var(--teg-surface)}
.teg-btn--p:hover{background:#24552E;border-radius:4px 14px 4px 14px}
.teg-btn--s{background:var(--teg-signal);border-color:var(--teg-signal);color:var(--teg-text)}
.teg-btn--s:hover{background:#D9AF22;border-color:#D9AF22}
.teg-btn--g{background:none;border-color:transparent;padding-left:0;color:var(--teg-accent);text-decoration:underline;text-decoration-color:var(--teg-signal);text-decoration-thickness:3px;text-underline-offset:4px}
.teg-btn--g:hover{color:var(--teg-text)}
.teg-fields{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.teg-f{min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:500;color:var(--teg-muted)}
.teg-f input,.teg-f select{font:500 15px var(--teg-body);color:var(--teg-text);background:var(--teg-bg);border:1.5px solid var(--teg-line);border-radius:12px;padding:9px 12px;outline:0;min-width:0}
.teg-f input:focus,.teg-f select:focus{border-color:var(--teg-accent);background:var(--teg-surface)}
.teg-badges{display:flex;flex-wrap:wrap;gap:6px}
.teg-bd{font:700 11px/1 var(--teg-body);padding:6px 10px;border-radius:999px;border:1px solid var(--teg-line);color:var(--teg-muted)}
.teg-bd--g{background:var(--teg-accent);border-color:var(--teg-accent);color:var(--teg-surface)}
.teg-bd--y{background:var(--teg-signal);border-color:var(--teg-signal);color:var(--teg-text)}
.teg-card{display:flex;flex-direction:column;background:var(--teg-accent)!important;color:var(--teg-surface);border-color:var(--teg-accent)!important;border-radius:var(--teg-radius) 70px var(--teg-radius) var(--teg-radius)!important}
.teg-card .teg-lbl{color:var(--teg-signal)}
.teg-card h4{margin:0 0 14px;font:500 24px/1.1 var(--teg-display)}
.teg-meter{height:10px;border-radius:999px;background:rgba(250,251,246,.2);overflow:hidden}
.teg-meter span{display:block;height:100%;width:var(--p);background:var(--teg-signal);border-radius:999px}
.teg-card__save{margin:8px 0 0;font-size:13px;opacity:.9}
.teg-card__save b{font:600 20px var(--teg-display);color:var(--teg-signal)}
.teg-card__price{margin:auto 0 0;padding-top:12px;font-size:13px}
.teg-card__price b{font:600 24px var(--teg-display);font-variant-numeric:tabular-nums}
.teg-card__price small{opacity:.75}
.teg-hero{background:var(--teg-text);color:var(--teg-surface);border-radius:var(--teg-radius);padding:14px 22px 22px}
.teg-hero__nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid rgba(250,251,246,.15);flex-wrap:wrap}
.teg-hero__nav strong{display:flex;align-items:center;gap:8px;font:600 21px var(--teg-display);margin-right:auto}
.teg-hero__nav .teg-leaf{background:var(--teg-signal)}
.teg-hero__in{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:end}
.teg-hero h4{margin:0;font:500 clamp(28px,3.4cqw,40px)/1.05 var(--teg-display)}
.teg-hero dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.teg-hero dl div{border-left:2px solid var(--teg-signal);padding-left:12px}
.teg-hero dt{font-size:12px;opacity:.7}
.teg-hero dd{margin:2px 0 0;font:600 24px/1.1 var(--teg-display);font-variant-numeric:tabular-nums}
.teg-hero dd small{font:500 12px var(--teg-body);opacity:.7}
.teg-fit{margin:0;font-size:13px;color:var(--teg-muted)}
.teg-fit b{color:var(--teg-accent)}
@container teg (max-width:1000px){.teg-wrap{grid-template-columns:1fr 1fr;grid-template-areas:"intro intro" "photo photo" "pal type" "ui card" "hero hero" "fit fit"}}
@container teg (max-width:620px){.teg-thm{padding:16px}.teg-wrap{grid-template-columns:1fr;grid-template-areas:"intro" "photo" "pal" "type" "ui" "card" "hero" "fit"}.teg-photo{min-height:220px;border-radius:0 90px 0 90px}.teg-hero__in,.teg-hero dl{grid-template-columns:1fr}.teg-hero__nav span{display:none}.teg-label{max-width:none;--k:.78}}
@media (prefers-reduced-motion:reduce){.teg-btn,.teg-chips i{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 →