Section-Katalog
Jede Section in allen Varianten, mit realistischen Beispielinhalten. Sections kennen nur semantische Tokens — die Kundenmarke ist eine Token-Datei pro Projekt.
Gleiche Sections, andere Tokens = andere Marke: der Marken-Schalter oben rechts tauscht nur Token-Werte (Farben, Fonts, Motion-Charakter) — keine Zeile Section-Code ändert sich.
Grundlagen: Design-Foundation — Hintergründe, Dekor-Ebene, Display-Typografie, Layout-Utilities.
Beispielekomplette Seiten, nur aus Katalog-Sections komponiert
- Schreinerei — komplette HomepageDie Flaggschiff-Komposition: Signature-Hero, Leistungen, Referenzen, Stimmen, Zahlen, FAQ und Kontakt — 13 Sections, ruhig und selbstbewusst.
/beispiele/schreinerei - Elektro — die laute SeiteTransparenter Auto-Hide-Header über Fullbleed-Hero, Drag-Slider, Vorher/Nachher, Bewertungen, Preise und Countdown-Aktion — die Interaktions-Welle in Aktion.
/beispiele/elektro - Kanzlei — die leise SeiteEditorial und typografiegeführt: zentrierter Hero, Zeitschriften-Spalten, Chronik, Werte und Vergleichstabelle — Zurückhaltung als Stil.
/beispiele/kanzlei - StellenanzeigeKomplette Stellen-Detailseite: Job-Hero, Doppelseite mit sticky Sidebar, Parallax-Band, Bewerbungsablauf, Team-Zitat, Formular und FAQ.
/beispiele/stellenanzeige
Heros10
- Hero editorialSignature-Hero: Display-Headline bis 12 rem, Bleed-Bild, überlappende Karte.
hero-editorialseit 0.3.0 - Hero geteiltEinstieg mit Headline, Checkliste und Bildspalte — Bild rechts oder links.
hero-splitseit 0.1.0 - Hero zentriertRuhiger Hero als zentrierte Spalte: Eyebrow, Display-Headline, optionale Beschreibung und Actions — Präsenz aus Typografie und Weißraum statt Bild.
hero-centeredseit 0.5.0 - Hero fullbleedVollflächiger Media-Hero: Bild oder stummes Video füllen die Section hinter dem 0,60-Scrim, die Display-Headline sitzt darüber.
hero-fullbleedseit 0.5.0 - Hero mit ZahlenbandEinstieg und Beweis in einer Section: linksbündiger Hero-Block (Eyebrow, Headline, Beschreibung, Actions) über einem bordierten Band aus 2–4 hochzählenden Kennzahlen.
hero-statsseit 0.5.0 - Hero-SliderBühnenslider mit 2–4 Textfolien im Scroll-Snap-Track — erste Folie statisch (LCP-sicher), Pfeile und Live-Zähler kommen per Enhancement.
hero-sliderseit 0.6.0 - Hero mit VideoSplit-Hero: Display-Headline links, Video-Fassade rechts — das Video lädt erst nach Klick auf den Play-Button.
hero-videoseit 0.6.0 - Hero mit LaufzeileStatische Display-Headline über einer selbstlaufenden Referenz-Zeile aus Leistungen oder Orten — mit Pause-Schalter.
hero-marqueeseit 0.6.0 - Hero mit FormularHandwerks-Klassiker: Display-Headline mit Vertrauenspunkten neben einem eingebetteten Anfrageformular — ganz ohne JavaScript.
hero-formseit 0.8.0 - Job-HeroKopf der Stellenanzeigen-Detailseite: Stellentitel in Display-Typo, Fakten-Chips (Pensum/Ort/Start), Kurzpitch und Bewerben-CTA.
job-heroseit 0.9.0
Interaktion16
- MarqueeLaufband-Statement in Display-Typo — Tempo kommt von der Marke.
marquee-textseit 0.3.0 - Showcase-ScrollerHorizontal scrollende Karten mit Scroll-Snap — Referenzen und Projekte mit Wow-Anteil.
showcase-scrollerseit 0.2.0 - Vorher-NachherBildvergleich mit verschiebbarem Divider per Range-Slider — reine CSS-Mechanik ohne Framework, mit statischem 50/50-Split als No-JS-Fallback.
before-afterseit 0.5.0 - KartensliderZiehbarer Kartenslider auf CSS-Scroll-Snap mit Bleed-Peek an der Viewport-Kante — Drag und Pfeile sind reine Enhancements.
drag-sliderseit 0.6.0 - Galerie-SliderGroßformatiger, randabfallender Bilder-Slider mit Bildunterschriften — Scroll-Snap ohne JavaScript, Drag per ./drag-Modul.
gallery-sliderseit 0.6.0 - Testimonial-SliderZiehbarer Zitat-Slider mit überdimensionierter Anführungs-Glyphe — kein Autoplay, Blockquote-Semantik je Karte.
testimonial-sliderseit 0.6.0 - Lightbox-GalerieBilder-Raster mit 2/3/4 Spalten, dessen Vorschauen die geteilte native Dialog-Lightbox öffnen — ohne JS öffnet das Bild im neuen Tab.
lightbox-galleryseit 0.6.0 - Sticky-StackKartenstapel, der beim Scrollen per position: sticky stehen bleibt und überdeckt wird — in modernen Browsern schrumpfen Karten scroll-getrieben.
sticky-stackseit 0.6.0 - Stacked PanelsBildschirmfüllende Panels, die per reinem Sticky-CSS übereinander schieben — mit automatisch rotierenden Ton- und Primärflächen.
stacked-panelsseit 0.6.0 - Parallax-BannerVollflächiges Bild-Band mit dezentem Scroll-Parallax hinter Scrim und Foreground-Text — nur unterhalb des Folds, nie LCP.
parallax-bannerseit 0.6.0 - Scroll-ErzählungKapitel-Erzählung mit pendelnden Textblöcken und einer fixierten, rein CSS-getriebenen Lesefortschritts-Leiste.
scroll-storyseit 0.6.0 - Bild-HotspotsFoto mit nummerierten Infopunkten: natives Popover plus CSS-Anchor-Positionierung, ganz ohne JavaScript — sichtbare Legende als Fallback.
image-hotspotsseit 0.6.0 - Leistungs-TabsBereiche als echte ARIA-Tabs mit ruhiger Underline-Leiste — ohne JavaScript stehen alle Panels sichtbar untereinander.
tabs-showcaseseit 0.6.0 - Akkordeon mit BildNative details-Zeilen links, rechts wechselt das Bild passend zur geöffneten Zeile — rein per CSS :has(), ohne JavaScript.
accordion-mediaseit 0.6.0 - Flip-KartenCSS-only-Karten mit Rückseite: Flip per Hover, Tastatur-Fokus oder sichtbarem Schalter je Karte — bei reduzierter Bewegung sofortiger Wechsel.
flip-cardsseit 0.6.0 - Video-FassadeConsent-freundliche Video-Bühne mit Poster und Play-Button — Iframe oder Videodatei laden erst nach Klick.
video-showcaseseit 0.6.0
Inhalt & Leistungen20
- Leistungs-RasterKarten-Raster für Leistungen mit 2, 3 oder 4 Spalten und optionalem Link je Karte.
services-gridseit 0.1.0 - Bento-RasterAsymmetrische Kacheln — Bild-, Stat- und Text-Zellen frei gemischt.
bento-gridseit 0.3.0 - Text & BildDer klassische Split — quiet als Zweispalter, bold mit Bleed-Bild und Überlapp-Karte.
text-imageseit 0.4.0 - Feature-ListeRuhige Liste von Merkmalen und Qualitäten mit kurzem Primärstrich über jedem Titel — wahlweise als offene Reihen oder Karten.
features-listseit 0.5.0 - Feature Split StickySticky-Bild (4:5 Hochformat) neben einer scrollenden Liste aus 3–6 Punkten — gemacht für Prozess- und Leistungsdarstellungen.
feature-split-stickyseit 0.5.0 - ProzessschritteNummerierter Ablauf in 3–6 Schritten mit überdimensionierten Display-Ziffern — als vertikale Timeline mit Verbindungslinie oder horizontale Reihe.
process-stepsseit 0.5.0 - Editorial ProseLesetypografie für Langtexte (Ratgeber, Artikel): Der Inhalt kommt als nackter Slot-Markup (h2/h3/p/Listen/Blockquote/Links), die Section liefert das Schriftsystem in einer maßbegrenzten Lesespalte.
editorial-proseseit 0.5.0 - Galerie MasonryBilderwand auf CSS-Columns für Bilder mit gemischten Seitenverhältnissen — 2 oder 3 Spalten, bewusst ohne Reveal, dezentes Hover-Dimmen.
gallery-masonryseit 0.5.0 - VergleichstabelleEchte HTML-Tabelle für 2–3 Angebote mit Häkchen-, Strich- oder Textwerten und hervorhebbarer Empfehlungsspalte.
comparison-tableseit 0.7.0 - DatentabelleTechnische Daten als semantische Definitionsliste in Gruppen — ein- oder zweispaltig, ruhige Utility-Section.
specs-tableseit 0.7.0 - Kompetenz-BalkenKompetenzbalken, die scroll-getrieben wachsen — die Prozentzahl steht immer als Text, der Balken ist Dekor.
skill-barsseit 0.7.0 - Schritte als KartenRuhiges Karten-Raster für 3–6 Schritte mit kleinem Nummern-Chip — die leise Schwester der Prozessschritte.
steps-cardsseit 0.7.0 - News-TeaserKarten-Raster für 2–4 Neuigkeiten mit Datums-Chip, verlinktem Titel und Teaser — optional mit Übersichts-Link.
news-teaserseit 0.7.0 - Artikel-ListeKompakte Beitragsliste mit Datumsspalte und Titel-Link je Zeile — für Aktuelles-, Presse- oder Ratgeber-Indizes.
article-listseit 0.7.0 - TerminlisteChronologische Termine mit Datums-Kachel (Tag groß, Monat klein), optionalem Ort und Link je Eintrag.
event-listseit 0.7.0 - Download-ListeHerunterladbare Dokumente mit Datei-Glyphe, Meta-Chip und Download-Button je Zeile.
download-listseit 0.7.0 - Text-SpaltenMehrspaltiger Lesetext im Zeitschriftenstil mit optionalem Drop-Cap auf dem ersten Absatz.
text-columnsseit 0.7.0 - Job-DetailsAufgaben, Profil und Wir-bieten als ruhige Checklisten-Spalten — das Herzstück jeder Stellenanzeige.
job-detailsseit 0.9.0 - News mit AufmacherZeitungsfront: eine große Aufmacher-Story mit Bild neben kompakten Nebenmeldungen in der Seitenspalte.
news-featuredseit 0.9.0 - News-ArchivDatiertes Meldungs-Archiv mit Kategorie-Filterleiste als Enhancement — ohne JavaScript bleiben alle Einträge sichtbar.
news-archiveseit 0.9.0
Beweis14
- ProjekteReferenz-Raster mit Tag und Link — uniform oder asymmetrisch mit großem Erstprojekt.
projectsseit 0.4.0 - StimmenKundenzitate mit riesigen Display-Anführungszeichen — gestapelt, Spalten oder Spotlight.
testimonialsseit 0.4.0 - KennzahlenZahlen in Display-Typo mit Count-up beim Einscrollen — als Band oder Kacheln.
statsseit 0.4.0 - Logo-WolkePartner-Logos als ruhiges Raster oder Marquee-Laufband mit Pause-Schalter.
logo-cloudseit 0.4.0 - Statement-ZitatRaumfüllendes Statement-Zitat mit übergroßer Anführungs-Glyphe und optionaler Attribution auf getönter, Primary- oder Verlaufsfläche.
quote-fullbleedseit 0.5.0 - Zitat-SpotlightEine einzelne Kundenstimme als Bühne — Porträt im Kreis neben Display-Blockquote, ohne Foto einspaltig.
testimonial-spotlightseit 0.5.0 - Case-TeaserGroße alternierende Referenz-Splits: pro Case ein Bleed-Bild bis an die Viewport-Kante mit überlappender Karte (Tag, Titel, Beschreibung, Pfeil-Link), Seitenwechsel automatisch.
case-teaserseit 0.5.0 - Bewertungs-KopfRuhiger Bewertungs-Kopf: große Score-Zahl in Display-Typo, Sterne, Anzahl und optionale Quelle — als Band oder Karte.
review-summaryseit 0.7.0 - Bewertungs-KartenEinzelne Kundenbewertungen mit Sternen — als ruhiges Karten-Raster oder ziehbarer Slider.
review-cardsseit 0.7.0 - Zitat-WandDichte Masonry-Wand aus kurzen Zitaten — Beweis durch Menge statt einzelner Spotlight-Aussage.
quote-wallseit 0.7.0 - Case in ZahlenEin Referenzfall in Zahlen: Bild, Kennzahlen-Band mit Count-up und optionales Zitat darunter.
case-statsseit 0.7.0 - AuszeichnungenSehr stilles Band aus Auszeichnungen und Siegeln zwischen zwei Haarlinien — Text-Badge oder Siegel-Bild je Eintrag.
awards-stripseit 0.7.0 - Partner-RasterStilles Kachel-Raster für Partner und Hersteller mit optionalem Logo, Kategorie-Chip und klickbarer Kachel.
partner-gridseit 0.7.0 - Vertrauens-LeisteKurze Vertrauens-Fakten in einer ruhigen, randlinierten Zeile — optional mit Sterne-Bewertung, ohne JavaScript.
trust-barseit 0.8.0
Conversion & Kontakt19
- CTA-BannerCall-to-action-Karte, split oder zentriert, auf muted- oder primary-Fläche.
cta-bannerseit 0.1.0 - FAQFragen & Antworten auf nativen Details-Elementen — optional exklusiv aufklappend.
faqseit 0.4.0 - KontaktformularBackend-agnostisches Formular mit Honeypot und sauberer Fehlersemantik — natives POST.
contact-formseit 0.4.0 - AnfahrtConsent-gated Karte (DSGVO): lädt erst nach Klick, daneben die Adresskarte.
location-mapseit 0.4.0 - PreisePreistabelle mit 2–3 Plänen als Karten: Preis als freier String in Display-Größe, Checkmark-Featureliste, CTA in voller Breite — der hervorgehobene Plan steigt per Primärrahmen, Schatten und leichtem Versatz aus der Reihe.
pricingseit 0.5.0 - Kontakt geteiltKontaktformular neben einer Kontext-Spalte für Adresse, Öffnungszeiten oder Karten-Platzhalter — gleicher Formular- und Honeypot-Vertrag wie contact-form.
contact-splitseit 0.5.0 - Aktions-BannerGanzseitenbreites Aktions-Band auf Primärfläche mit Live-Countdown bis zum Stichtag — ohne JavaScript steht das formatierte Enddatum.
offer-bannerseit 0.6.0 - Offene StellenStellenangebote als Zeilenliste oder Karten — optional mit Ort/Pensum-Filter-Chips als Enhancement, inklusive Leerstand-Variante.
job-listseit 0.7.0 - CTA mit BildAbschluss-CTA mit Bildhälfte auf einer schwebenden, abgerundeten Karte — Primär- und optionaler Sekundär-Button.
cta-splitseit 0.8.0 - Newsletter-AnmeldungRuhiges E-Mail-Anmeldeband mit sichtbarem Label, Honeypot und optionalem Datenschutzhinweis — natives POST.
newsletter-signupseit 0.8.0 - Rückruf-AnfrageKompaktes Rückruf-Band mit Name/Telefon-Formular — wahlweise auf Primär- oder getönter Fläche.
callback-requestseit 0.8.0 - GarantieGarantie-Versprechen mit eigenem Siegel-Badge, Beschreibung und Check-Liste.
guaranteeseit 0.8.0 - FAQ mit KontaktkarteFAQ-Liste links, sticky Kontaktkarte rechts — die Antwort auf offene Fragen steht direkt neben dem CTA.
faq-splitseit 0.8.0 - PreisvergleichPreis-Matrix als echte Tabelle: 2–3 Pläne als Spalten mit Display-Preis und CTA, Leistungen als Zeilen, eine Spalte hervorhebbar.
pricing-comparisonseit 0.8.0 - EinsatzgebietAbdeckungsgebiet als Orts-Chips mit optionaler DSGVO-konformer Kartenvorschau nach dem Consent-Muster.
service-areaseit 0.8.0 - KontaktkartenKontaktwege als Kachel-Raster mit eigenen Icons — Telefon, E-Mail und WhatsApp verlinken direkt.
contact-cardsseit 0.8.0 - ÖffnungszeitenÖffnungszeiten-Tabelle mit optionalem Live-Badge — der Status wird nur clientseitig berechnet, nie ins HTML gebacken.
opening-hoursseit 0.8.0 - BewerbungsformularBewerbungsformular mit Positions-Kontext, optionalem Datei-Upload und Pflicht-Datenschutz-Zustimmung — natives POST, Anker #bewerbung.
application-formseit 0.9.0 - Stellen-DoppelseiteChecklisten-Gruppen in der 2/3-Spalte neben einer sticky Sidebar mit Fakten-Karte, Bewerben-Karte auf Primärfläche und Ansprechpartner.
job-splitseit 0.10.0
Team & Struktur10
- TeamPersonen-Grid mit Foto- oder Monogramm-Kreisen und dezentem Hover-Lift.
teamseit 0.4.0 - ChronikVertikale Jahres-Chronik mit überdimensionierten Geister-Jahreszahlen hinter jedem echten Meilenstein.
history-timelineseit 0.7.0 - Werte-RasterUnternehmenswerte als editorielle Liste mit übergroßem, blassem Anfangsbuchstaben statt Icon.
values-gridseit 0.7.0 - Team-SpotlightEine Person groß: Porträt im versetzten Rahmenakzent, Zitat, Qualifikations-Chips und optionaler CTA.
team-spotlightseit 0.8.0 - QualifikationenRuhige editoriale Liste von Zertifikaten und Auszeichnungen mit Jahr, Titel und Aussteller.
certificationsseit 0.8.0 - AnkündigungsleisteSchließbarer Hinweisstreifen — das Wegklicken persistiert pro id in localStorage, ohne Flackern beim Laden.
announcement-barseit 0.8.0 - Footer mit WortmarkeAusdrucksstarker Seitenabschluss: Link-Spalten, Legal-Zeile und ein riesiger, an der Kante angeschnittener Marken-Schriftzug.
footer-bigseit 0.8.0 - Unterseiten-KopfBreadcrumb-Pfad, Seitentitel und Lead als ruhiges Band — der Kopf für Leistungs-, Über-uns- und Rechtsseiten, denen ein Hero zu viel wäre.
page-introseit 0.13.0 - HeaderSeitenkopf mit Logo-Slot, Navigation und CTA — optional sticky, mobil ohne JavaScript.
headerseit 0.4.0 - FooterRuhiger Seitenabschluss auf getönter Fläche: Brand-Block, Link-Spalten, Legal-Zeile.
footerseit 0.4.0