On Fleek Theme
103 Sections, eine Marke pro Token-Datei
Jede Section in allen Varianten, mit realistischen Beispielinhalten, über 6 Kategorien. 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.
Taste / springt in die Suche.
12 Sections
Heros
- 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 – die overlay-Variante ankert den Text unten auf dem Plateau-Overlay.
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 - Hero AuroraVollflächiger Hero mit driftendem Aurora-Mesh aus mehreren Glow-Ebenen, Word-Reveal-Kicker und magnetischem CTA.
hero-auroraseit 0.21.0 - Split-Reveal-HeroZweigeteilter Hero: Text und Medium kommen aus entgegengesetzten Seiten herein – die Headline bleibt LCP-statisch.
split-reveal-heroseit 0.21.0
19 Sections
Interaktion
- 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 - Pinned-SequenzScrollytelling-Panel: pinnt bei 100svh, 2–4 Steps wechseln scroll-getrieben mit Bild-Crossfade – ohne Support ein lesbarer Stapel.
pinned-sequenceseit 0.34.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 - Bild-EnthüllungScroll-getriebene Clip-/Mask-Enthüllung eines Bildes; ohne Scroll-Driven-Support steht das Bild schlicht voll da.
image-revealseit 0.21.0 - Deck-SliderKarten-Fächer im Scroll-Snap-Track mit Tiefe und Edge-Fade – dieselbe Drag-/Snap-Mechanik wie die anderen Slider.
deck-sliderseit 0.21.0
23 Sections
Inhalt & Leistungen
- Leistungs-RasterKarten-Raster für Leistungen mit 2, 3 oder 4 Spalten und optionalem Link je Karte – die image-Variante führt jede Karte mit einem Foto an.
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, Karten oder mit Ghost-Ordnungsziffer.
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 - Spotlight-KartenKarten-Raster mit einem radialen Spotlight, der dem Cursor folgt (pointer:fine, ohne JS voll nutzbar).
spotlight-cardsseit 0.21.0 - Verlaufs-PanelsBento aus Panels mit ein bis zwei Verlaufsflächen (token-getrieben, kontrastgeprüft) im Mix mit ruhigen Karten.
gradient-panelsseit 0.21.0 - Orbit-FeaturesRadiale Feature-Anordnung um ein zentrales Element; auf Mobile ein sauberer vertikaler Stack.
orbit-featuresseit 0.21.0
17 Sections
Beweis
- 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 - Logo-BandGefasste Logo-Kacheln mit Zweck-Zeile – hell oder auf der Primary-Fläche, mono oder farbig, ohne Marquee.
logo-bandseit 0.32.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 - Kennzahlen-OdometerGroße, zentrierte Kennzahlen mit Count-up beim Scrollen und einer Signatur-Gradient-Zahl – der Voll-Fokus zu stats, auf Wunsch als Voll-Band auf der Primary-Fläche.
stats-odometerseit 0.21.0 - Marquee-GalerieKontinuierlich laufende Bildreihe (CSS-only, Pause bei Hover/Fokus), optional zwei gegenläufige Reihen für Tiefe.
marquee-galleryseit 0.21.0
22 Sections
Conversion & Kontakt
- CTA-BannerCall-to-action-Karte, split oder zentriert, auf muted- oder primary-Fläche.
cta-bannerseit 0.1.0 - Bild-ZwischensectionVollflächiges Foto mit genau einem Satz auf dem Overlay-Plateau plus CTA-Slot – Atem durch Bild, nie LCP.
media-ctaseit 0.32.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 - Marken-KarteInteraktive Vektor-Karte in Markenfarben (MapLibre + VersaTiles): färbt live aus den Tokens, deutsche Server, kein Consent-Klick nötig.
location-map-vectorseit 0.24.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, optional mit Marken-Karte des Einzugsgebiets (Vektor, ohne Consent-Klick).
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 - Pricing GlowPreistafel mit inszeniertem Featured-Plan: Gradient-Hairline, eigener Glow und großer Preis in Display-Größe.
pricing-glowseit 0.21.0
10 Sections
Team & Struktur
- 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