Generische Sections

Tenant · DGN One

Generische Content-Sections

Tenant-übergreifende Bausteine für dgn.org-Seiten (Studio, künftig News, Podcast, …) und potenziell auch Akademie-Subpages. Hier als reine Component-Showcases mit Demo-Daten — die echten Texte und Bilder liegen im CMS auf der jeweiligen öffentlichen Seite.

MediaHeroSectionStable

@repo/ui/sections

Vollflächiger Bild-Hero mit Headline, Subline und optionalem outlineLight-CTA. Eigene Section, weil der akademie-eigene HeroSection mit Suchfeld + Topic-Chips für statische Marketing-/Landing-Pages nicht passt. Container nutzt das gleiche 1200px-Gutter wie alle anderen Sections, sodass die Headline mit dem Inhalt darunter bündig auf gleicher x-Achse beginnt.

Demo-Hintergrundbild

Headline auf vollflächigem Bild

Eine zweizeilige Subline kann hier optional die Headline ergänzen — in maximal ~640 px Textbreite.

FeatureSplitSectionStable

@repo/ui/sections

Dunkle Full-Bleed-Section mit Bild auf einer Seite und 2-spaltigem Icon-Feature-Grid auf der anderen. Wiederverwendbar für jede Capability-/Equipment-/Highlights-Übersicht. Auf Mobile stapelt das Bild über den Features. Icons aus dem zentralen Lucide-Subset, das auch der Admin-Icon-Picker nutzt.

Beispiel-Feature-Block

Demo-Bild für Feature-Split

  • Klinische Schwerpunkte

    Schlaganfall, Epilepsie, Bewegungsstörungen, Demenz, Multiple Sklerose.

  • CME-zertifiziert

    Alle Live-Termine sind durch die LÄK akkreditiert; Fortbildungspunkte werden automatisch eingebucht.

  • Hybrid-Format

    Vor Ort oder per Stream — Aufzeichnungen sind in der Mediathek verfügbar.

  • Peer-Learning

    Diskussion mit Kolleg:innen aus ganz DACH, moderiert von DGN-Sektionssprechern.

ImageGallerySectionStable

@repo/ui/sections

Mehrreihige Galerie mit pro Reihe konfigurierbarer Spalten-Aufteilung (2 oder 3). featureFirst=true (nur bei 2 Spalten) lässt das erste Bild über beide Zeilen der linken Spalte spannen — die restlichen Bilder stapeln rechts. Optional Play-Icon-Overlay pro Bild via videoOverlay. Reihen ohne Bilder werden ausgefiltert, damit Drafts nicht hohl wirken.

Demo-Bild 1 — Hero-Format
Demo-Bild 2 — Detail
Demo-Bild 3 — Detail
Demo-Bild 4
Demo-Bild 5
Demo-Bild 6

MapEmbedSectionStable

@repo/ui/sections

Statisches Kartenbild + 2-spaltige Kontakt-Zeilen. Kein iframe, kein Client-JS — die Karte ist ein hochgeladenes Bild, der Brand-blaue Pin sitzt als SVG-Overlay an konfigurierbarer Position (markerX/markerY in Prozent). Einzeilige Kontakt-Zeilen zentrieren sich vertikal mit ihrem Icon, mehrzeilige (Adresse, Öffnungszeiten) fließen oben-bündig. OSM-Attribution out-of-the-box.

Demo-Karte
In OpenStreetMap öffnen

Kartendaten © OpenStreetMap-Mitwirkende, Lizenz: ODbL

CardSection — footerCtaStable

@repo/ui/sections

Generische Karten-Section (Variante icon hier) mit optionalem zentriertem CTA-Button unterhalb des Grids. Existierender CardSection-Block, ergänzt um footerCtaLabel/Href/External — backwards-compatible: fehlt der Label oder das Ziel, rendert kein Footer-Button. Nützlich z. B. für die Wiederholung eines Primary-CTAs am Ende eines Service-Grids.

Demo-Service-Block

Service A

Kurzbeschreibung Service A — was die Karte zeigt.

Service B

Kurzbeschreibung Service B — was die Karte zeigt.

Service C

Kurzbeschreibung Service C — was die Karte zeigt.

Service D

Kurzbeschreibung Service D — was die Karte zeigt.