Organisms thatsadam Design System

thats adam
Complex UI Sections

Self-contained sections of the interface built from multiple molecules and atoms. Organisms can stand alone and be reused across templates — the navigation, footer, stats bar, and CTA section all exist here.

Stats Bar

Full-bleed horizontal row of stat items. Bordered top and bottom. Horizontally scrollable on mobile with scroll-snap. Used on the homepage below the hero.

17+Years
50+Projekter
3Awards
3Genres
<div class="stats-bar">
  <div class="stats-bar__item">
    <span class="stats-bar__value">17+</span>
    <span class="stats-bar__label label-s">Årelang erfaring</span>
  </div>
  <div class="stats-bar__item">
    <span class="stats-bar__value">50+</span>
    <span class="stats-bar__label label-s">Projekter afsluttet</span>
  </div>
  <div class="stats-bar__item">
    <span class="stats-bar__value">3</span>
    <span class="stats-bar__label label-s">Designpriser</span>
  </div>
  <div class="stats-bar__item">
    <span class="stats-bar__value">3</span>
    <span class="stats-bar__label label-s">Forskellige genrer</span>
  </div>
</div>

CTA Section

Reusable call-to-action block. Blur glass background creates depth against the page canvas. Included at the bottom of every primary template via thats_adam_part('components/cta-section').

Kontakt os, og lad os arbejde sammen :)

Lige nu tilgængelig for freelancejobs og kreative partnerskaber verden over. Lad os bygge noget exceptionelt sammen.

Lad os tale 
<section class="cta-section">
  <div class="cta-section__blur" aria-hidden="true"></div>
  <div class="cta-section__content">
    <h2 class="cta-section__heading heading-xxl">Kontakt os, og lad os arbejde sammen :)</h2>
    <p class="cta-section__body body-m">Lige nu tilgængelig for freelancejobs og kreative partnerskaber verden over. Lad os bygge noget exceptionelt sammen.</p>
  </div>
  <a href="/da/contact/" class="btn btn-secondary">Lad os tale</a>
</section>
Do

Always place the CTA section as the final element before the footer on any primary page template.

Don't

Don't modify the CTA heading per-page — shared copy ensures brand consistency across the site.

Hero Canvas Background

Procedural animated background. Generates a random maze via depth-first search, then animates glowing particles through paths. Interactive: click events trigger particle bursts. Theme-aware — reads colour values from CSS custom properties via getComputedStyle at runtime.

Modes

  1. Animated (homepage) — full particle + glow animation, click interactions, 30-second game mechanic with score tracking
  2. Static (services page) — maze renders once, no animation, passed via ['static' => true]
<!-- The parent must be position:relative — the canvas fills it -->
<section class="hero" style="position:relative;">
  <canvas id="hcbg-a1b2c3" class="hero-canvas-bg" data-static="0" aria-hidden="true"></canvas>
  …hero content…
</section>

Project Grid

2-column CSS grid of project cards. Includes a header row with section label + heading left, "All projects" ghost link bottom-right. WP_Query driven — shows published portfolio posts.

Anatomy

  1. Header row — label + heading left; "All projects" .btn-ghost right, align-items: flex-end
  2. Grid — grid-template-columns: repeat(2, 1fr), gap: var(--space-2xl) row / var(--space-1xl) column
  3. Cards — Project Card molecule, WP_Query loop of portfolio CPT
<div class="work-grid-wrap container">
  <div class="work-grid" id="work-grid">
    <article class="project-card" style="grid-column:1/4" …>…</article>
    <article class="project-card project-card--flip" style="grid-column:1/4" …>…</article>
  </div>
  <p class="work-grid__empty body-m" id="work-grid-empty" style="display:none">Ingen projekter matcher dette filter.</p>
</div>

Homepage Hero

947px tall hero. Left column = audience selector (7 items, extralight, active = blue glow). Right column = heading + bio + CTA row. Animated geometric maze canvas background. Clicking a glow particle explodes it.

For Designers

I speak your language — and bridge the gap to dev.

From design system architecture to token-based theming — I build the vocabulary that makes handoff frictionless.

Anatomy

  1. Canvas BG — hero-canvas-bg.php (animated=true), position:absolute, mask fades at 55% down
  2. Audience selector (left) — 240px col · 7 items · var(--text-2xl) · var(--fw-extralight) · active = var(--color-active-glow) + glow shadow
  3. Hero text (right) — label-m + .heading-xxxl (responsive) + .body-l + CTA row (btn-primary + btn-secondary)
  4. Height — min-height: 947px on production; hero fills viewport minus nav
Audience variants
GeneralUnique heading, bio, and CTA label
UdviklereUnique heading, bio, and CTA label
Hiring managersUnique heading, bio, and CTA label
DesignereUnique heading, bio, and CTA label
ProjektledereUnique heading, bio, and CTA label
LøsningsarkitekterUnique heading, bio, and CTA label
KollegerUnique heading, bio, and CTA label
<section class="home2-hero" id="home2-hero">
  <div class="home2-hero__bg" aria-hidden="true">
    <img src="/wp-content/themes/thats-adam/assets/hero-photo.png" alt="" class="home2-hero__photo">
  </div>
  <div class="home2-hero__grid">
    <div class="home2-hero__left">
      <div class="home2-hero__row">
        <div class="home2-hero__as" id="home2-hero-as">
          <p class="home2-hero__as-text" id="home2-hero-as-text">As a <strong>Designer</strong></p>
        </div>
        <div class="home2-hero__for">
          <div class="home2-hero__for-label" id="home2-hero-for-label">…</div>
          <ul class="home2-hero__audience-list" id="home2-hero-audience-list">…</ul>
        </div>
      </div>
      <p class="home2-hero__body" id="home2-hero-body">So that you can quickly get a genuine sense of how I think, design and deliver — whoever you are and whatever brought you here today.</p>
    </div>
    <div class="home2-hero__name" aria-hidden="true">…</div>
  </div>
</section>