NUM Style Guide

Reusable Tailwind CSS components inspired by Netzwerk Universitätsmedizin. Click any code block to copy the HTML.

Hero Section

Forschung vernetzen. Gesundheit verbessern.

Das Netzwerk Universitätsmedizin bündelt die Expertise aller deutschen Universitätskliniken. 

<div class="bg-gradient-to-br from-num-teal-light to-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div>
        <h1 class="text-5xl md:text-6xl font-bold text-num-dark mb-6 leading-tight">
          Forschung vernetzen. Gesundheit verbessern.
        </h1>
        <p class="text-xl text-num-gray mb-8">
          Das Netzwerk Universitätsmedizin bündelt die Expertise aller deutschen Universitätskliniken.
        </p>
        <div class="flex flex-wrap gap-4">
          <button class="px-6 py-3 bg-num-primary text-white rounded-md hover:bg-opacity-90 transition-all font-medium">
            Mehr erfahren
          </button>
          <button class="px-6 py-3 border-2 border-num-dark text-num-dark rounded-md hover:bg-num-dark hover:text-white transition-all font-medium">
            Projekte ansehen
          </button>
        </div>
      </div>
      <div class="flex justify-center">
        <img src="hero-image.jpg" alt="Hero" class="rounded-lg shadow-lg" />
      </div>
    </div>
  </div>
</div>

Buttons

Primary Button

<button class="px-6 py-3 bg-num-primary text-white rounded-md hover:bg-opacity-90 transition-all font-medium">
  Primary Button
</button>

Secondary Button

<button class="px-6 py-3 border-2 border-num-dark text-num-dark rounded-md hover:bg-num-dark hover:text-white transition-all font-medium">
  Secondary Button
</button>

Text Links

Weiterlesen → Mehr erfahren → 
<a href="#" class="text-num-primary hover:text-num-dark transition-colors font-medium underline">
  Weiterlesen →
</a>

Cards

Service Cards

Forschungsdaten

Wir bündeln Forschungsdaten aus allen Universitätskliniken für bessere medizinische Erkenntnisse.

Mehr erfahren →

Studien

Koordination klinischer Studien zur Verbesserung der Patientenversorgung.

Mehr erfahren →

Plattformen

Digitale Infrastruktur für den sicheren Datenaustausch im Netzwerk.

Mehr erfahren → 
<div class="bg-white rounded-lg p-8 shadow-md hover:shadow-xl transition-shadow">
  <div class="w-16 h-16 bg-num-teal-light rounded-full flex items-center justify-center mb-6">
    <!-- Icon SVG -->
  </div>
  <h3 class="text-xl font-bold text-num-dark mb-3">Forschungsdaten</h3>
  <p class="text-num-gray mb-4">
    Wir bündeln Forschungsdaten aus allen Universitätskliniken für bessere medizinische Erkenntnisse.
  </p>
  <a href="#" class="text-num-primary hover:text-num-dark transition-colors font-medium">
    Mehr erfahren →
  </a>
</div>

Content Card

AKTUELLES

Neue Forschungsergebnisse zur Pandemiebekämpfung

Das NUM präsentiert wegweisende Studienergebnisse, die neue Behandlungsansätze ermöglichen.

Weiterlesen 
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
  <div class="md:flex">
    <div class="md:w-1/2">
      <img src="image.jpg" alt="News" class="h-64 md:h-full w-full object-cover" />
    </div>
    <div class="md:w-1/2 p-8">
      <div class="text-sm font-semibold text-num-primary mb-2">AKTUELLES</div>
      <h3 class="text-2xl font-bold text-num-dark mb-4">
        Neue Forschungsergebnisse zur Pandemiebekämpfung
      </h3>
      <p class="text-num-gray mb-6">
        Das NUM präsentiert wegweisende Studienergebnisse, die neue Behandlungsansätze ermöglichen.
      </p>
      <a href="#" class="inline-flex items-center text-num-primary hover:text-num-dark transition-colors font-medium">
        Weiterlesen
        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </a>
    </div>
  </div>
</div>

Logo Grid

Unsere Plattformen

CODEX
FDPG
COMPASS
CEOsys
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
  <div class="bg-num-gray-lighter rounded-lg p-6 flex items-center justify-center hover:shadow-md transition-shadow">
    <img src="logo1.svg" alt="Platform" class="max-h-12" />
  </div>
  <div class="bg-num-gray-lighter rounded-lg p-6 flex items-center justify-center hover:shadow-md transition-shadow">
    <img src="logo2.svg" alt="Platform" class="max-h-12" />
  </div>
  <!-- More logos... -->
</div>

Typography

Heading 1 - 5xl

Heading 2 - 4xl

Heading 3 - 3xl

Heading 4 - 2xl

Heading 5 - xl
Heading 6 - lg

Body text - base size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large body text - lg. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Small text - sm. Used for captions and helper text. 

<h1 class="text-5xl font-bold text-num-dark">Heading 1</h1>
<h2 class="text-4xl font-bold text-num-dark">Heading 2</h2>
<h3 class="text-3xl font-bold text-num-dark">Heading 3</h3>
<h4 class="text-2xl font-bold text-num-dark">Heading 4</h4>
<h5 class="text-xl font-bold text-num-dark">Heading 5</h5>
<h6 class="text-lg font-bold text-num-dark">Heading 6</h6>
<p class="text-base text-num-gray">Body text</p>
<p class="text-lg text-num-gray">Large text</p>
<p class="text-sm text-num-gray">Small text</p>
Code copied to clipboard!