Block-Katalog
Alle 47 Blöcke aus dem Layout-Auswähler, einmal mit Beispielinhalt gerendert. Über jedem Element steht eine Zeile mit Nummer, internem Namen (blockType), Kategorie und Variante. Wo ein Block mehrere Varianten kennt, stehen sie direkt untereinander.
Zum Kommentieren: die Nummer aus der Label-Zeile nennen, dann ist eindeutig, welches Element gemeint ist. Alle Buttons und Links auf dieser Seite zeigen bewusst ins Leere. Die beiden Formular-Blöcke am Ende hängen am echten Formular „snipKI Kontakt“ – dort bitte nichts abschicken.
01 · snipStackHero
Kategorie hero · keine Varianten · Snip Stack Hero
Snip Stack Hero
Ein autoplayendes Hochformat-Reel rechts, Headline und Text links, die Aktion separat daneben. Pflichtfelder: Titel, Video-URL, Video-Titel. Maximal zwei Links.
02 · imageHero
Kategorie hero · imageFocus: center (auch left, right) · bottomAccent an · Image Hero
Image Hero
Der einfachste bildgeführte Einstieg: Headline, Text, bis zu zwei Aktionen, ein Bild. Das Bild kommt aus der Mediathek oder über externalMediaUrl. imageFocus steuert den Bildausschnitt, bottomAccent die Akzentkante unten.
03 · marketingHero
Kategorie hero · zwei Varianten: split und mural · beide stehen hier untereinander · Marketing Hero
Marketing Hero – Variante split
Der Standard-Hero für neue Marketingseiten, wenn Image Hero zu schlicht ist. In der Variante split stehen Text links, Medium rechts und die Proof-Karten daneben. Ein bis drei Karten sind erlaubt.
Karte 1cards[] ist hier ein Proof-Punkt neben dem Hero.
Karte 2Titel und Beschreibung sind beide Pflicht.
Karte 3Mehr als drei Karten nimmt der Block nicht an.
Marketing Hero – Variante mural
Gleicher Block, andere Variante: mural spielt das Bild vollflächig aus. Die Karten rutschen dabei als Partner-Nennung nach unten rechts. Genau derselbe Feldsatz, nur variant umstellen.
04 · marketingHeader
Kategorie hero · keine Varianten, aber vier zuschaltbare Panels · Marketing Header
Marketing Header
Der größte Hero: Route-Karten zum Selbst-Einsortieren, ein Lernpfad- und ein Governance-Panel, eine Pilot-Karte mit Fortschritt, eine Metrik-Karte und eine Proof-Reihe darunter. Nur für komplexe B2B-Angebote, die mehrere Wege über der Falz erklären müssen.
Panel learningPath
- 1Schritt im Zustand complete
- 2Schritt im Zustand currentLäuft
- 3Schritt im Zustand upcomingFolgt
Panel governance
- Eintrag im Zustand completeGeprüft
- Eintrag im Zustand currentIn Arbeit
- Eintrag im Zustand upcomingOffen
Karte pilotCard
Fortschritt
Feld goal
Feld statusLabel
Feld milestoneLabel
Feld milestone
Karte metricCard
42 %
dataPoints zeichnet den kleinen Verlauf, maximal sechs Werte.
Proof-Punkt, Icon shield
proofItems[] steht als Reihe unter dem Hero.
Proof-Punkt, Icon team
Ein bis vier Einträge, Beschreibung optional.
Proof-Punkt, Icon chart
Icon-Auswahl: clipboard, team, graduation, rocket, shield, chart.
05 · learningPlatformHero
Kategorie hero · keine Varianten · nur für die Lernplattform · Learning Platform Hero
Learning Platform Hero
Nur für Seiten, die die snipKI-Lernplattform verkaufen oder erklären. Zeigt einen hervorgehobenen Snip, die nächsten Lektionen, Proof-Punkte und einen Fortschrittsbalken.
- Proof-Punkt, Icon time
- Proof-Punkt, Icon check
- Proof-Punkt, Icon certificate
Dein täglicher Snip
Feld streakLabel
featuredSnip: der hervorgehobene Snip
4 Min.
Was du lernst
- outcomes[], maximal drei
- Zweites Ergebnis
- Drittes Ergebnis
Deine nächsten Snips
nextSnips[], Ton green
3 Min.
nextSnips[], Ton coral
5 Min.
nextSnips[], Ton mint
4 Min.
nextSnips[], Ton teal
6 Min.
06 · missionStatement
Kategorie story · keine Varianten · Mission Statement
Mission Statement: ein großer Satz, mehr nicht.
Drei Felder: eyebrow, statement (Pflicht), description. Gedacht als kurzer Marken-Break zwischen zwei Abschnitten, nicht für mehrteilige Inhalte.
07 · problemStatement
Kategorie story · keine Varianten · ein bis sechs Pain Points · Problem Statement
Problem Statement
Benennt das Problem der Besucherin, bevor die Lösung kommt. Titel und Beschreibung sind Pflicht, dazu ein bis sechs Pain Points mit je Titel und Beschreibung.
Pain Point 1
painPoints[] – Titel und Beschreibung sind beide Pflicht.
Pain Point 2
Gehört früh auf die Seite, direkt nach dem Hero.
Pain Point 3
Maximal sechs Einträge, sonst verliert der Abschnitt seine Schärfe.
08 · statementSplit
Kategorie story · background: white (auch offwhite) · Statement Split
Statement Split
Editorial-Statement mit ein bis vier Absätzen. Der Titel steht links, die Absätze laufen rechts – daher der Name.
Für Haltung, Positionierung oder Manifest-Text, der als klarer Erzählbruch gelesen werden soll.
background lässt sich auf white oder offwhite stellen. Dieser Abschnitt steht auf white.
callout ist optional und wird als hervorgehobener Schlusssatz gesetzt.
09 · numberedCards
Kategorie story · columns: four (auch three) · background: offwhite (auch white) · Numbered Card Section
Numbered Card Section
Karten mit sichtbarer Nummerierung, drei- oder vierspaltig. Für Prinzipien, Phasen oder Begriffe, bei denen die Reihenfolge Bedeutung trägt.
Karte mit Kicker
items[] – Titel und Beschreibung Pflicht, kicker optional.
Karte ohne Kicker
Die Nummer vergibt der Block automatisch nach Reihenfolge.
Dritte Karte
columns steuert drei- oder vierspaltig, background white oder offwhite.
Vierte Karte
Bis zu acht Einträge sind erlaubt, sie brechen dann um.
10 · processSteps
Kategorie story · keine Varianten · drei bis fünf Schritte · Process Steps
Process Steps
Linearer Ablauf mit drei bis fünf Schritten und genau einer Aktion am Ende. Für Onboarding, Lieferung oder Umsetzung.
Einzelne Aktion am AbschnittsendeSchritt 1
steps[] nimmt mindestens drei und höchstens fünf Einträge.
Schritt 2
Titel und Beschreibung sind jeweils Pflicht.
Schritt 3
Der Link unten ist eine Gruppe, kein Array – also genau eine Aktion.
11 · collaborationProcess
Kategorie story · background: offwhite (auch white) · Collaboration Process
Collaboration Process
Wie eine Zusammenarbeit abläuft: zwei bis sechs Schritte, jeder mit Icon. Die Icon-Auswahl ist fest: calendar, phone, video, target, users, workflow.
Icon calendar
label ist optional und fällt sonst auf die Position zurück.
- 02
Icon phone
Titel und Beschreibung sind Pflicht.
Icon video
background wählt zwischen white und offwhite.
Icon target
Weitere Icons: users und workflow.
12 · iconStepList
Kategorie story · background: mint (auch white, offwhite) · Icon Step List
Icon Step List
Icon audience
Kompakte Liste, ein bis sechs Schritte. Nur diese vier Icons sind verfügbar.
Icon examples
Wenn kein Icon passt, ist processSteps oder numberedCards die bessere Wahl.
Icon stage
background: mint, white oder offwhite.
Icon followUp
Titel und Beschreibung sind Pflicht, es gibt keinen Link im Block.
13 · storyTimeline
Kategorie story · keine Varianten · zwei bis acht Einträge · Story Timeline
Story Timeline
Chronologie mit frei wählbarem Marker links. Zwei bis acht Einträge. Für Unternehmensgeschichte, Reifegrade oder jede Abfolge, bei der Zeit eine Rolle spielt.
- 2023
Feld meta
Eintrag mit Jahres-Marker
marker, title und description sind Pflicht.
- 2024
Zweiter Eintrag
meta ist optional und steht als kleine Zusatzzeile daneben.
- Phase 3
Beliebiger Text
Marker muss keine Jahreszahl sein
Auch Phasen, Stufen oder Quartale funktionieren.
14 · learningPathTimeline
Kategorie story · keine Varianten · vier bis sechs Schritte · Learning Path Timeline
Learning Path Timeline
Macht einen Lernplan konkret: vier bis sechs Schritte mit Zustand, optional eine Zertifikats-Karte am Ende.
Woche 1 · Feld snipLabel
Schritt im Zustand complete
dayLabel, title und description sind Pflicht.
20 Min.
Woche 2
Zweiter abgeschlossener Schritt
snipLabel und duration sind optional.
25 Min.
- 3
Woche 3
Schritt im Zustand current
Genau ein Schritt sollte current sein.
30 Min.
- 4
Woche 4
Schritt im Zustand upcoming
Alles danach bleibt upcoming.
30 Min.
Gruppe certificate
Optionale Abschluss-Karte unter der Timeline.
15 · journeyCards
Kategorie story · keine Varianten · Icons starter, expert, community · Journey Cards
Journey Cards
Zwei bis vier illustrierte Karten mit festem Vokabular: starter, expert, community. Akzentfarbe je Karte wählbar.
Icon starter, Akzent green
items[] – Titel, Beschreibung, Icon und Akzent sind Pflicht.
Icon expert, Akzent coral
Die Illustration ergibt sich aus dem Icon, sie lässt sich nicht frei setzen.
Icon community, Akzent teal
ctaLabel und ctaUrl steuern den Button unter den Karten.
16 · logoStrip
Kategorie proof · zwei Quellen: customerLogos und custom · beide stehen hier untereinander · Logo Strip
Logo Strip – Quelle customerLogos
17 · statsBand
Kategorie proof · background: darkTeal (auch offwhite, white) · Stats Band
Stats Band
Zwei bis sechs Kennzahlen, jede mit Wert, Label und optionalem Detailtext. Wenn Zahlen der Beweis sind und Kundenlogos nicht nötig.
- 2–6Einträge erlaubtdetail ist optional und steht klein unter dem Label.
- 3HintergründedarkTeal, offwhite, white.
- 2Pflichtfelder je Eintragvalue und label.
- 1Titeltitle ist Pflicht, description optional.
18 · trustStatsBand
Kategorie proof · logoSource: customerLogos (auch custom) · Trust Stats Band
Trust Stats Band
Kundenlogos und Kennzahlen in einem Band. Zwei bis vier Kennzahlen, jede mit festem Icon.
- Icon
- users
- Icon
- briefcase
- Icon
- percent
- Icon
- star
19 · logoCloud
Kategorie proof · source: customers (auch custom) · monochrome an, paused aus · Logo Cloud
Logo Cloud
Große Logowand mit Wechsel-Animation. monochrome entsättigt die Logos und zeigt die Markenfarbe erst beim Hover, paused schaltet die Animation ab, intervalMs und itemsPerPage steuern Tempo und Gruppengröße.
- HUGO BOSS
- Carl Zeiss
- SCHOTT
- DKB
- Snipes
- HubSpot
- Melitta
- Storck
- Handelsblatt
- freenet
- Swagelok
- evasys
- AEB
- Clockodo
- Device Insight
- Livesystems
- Social DNA
- congstar
- Reformhaus
- A.S. Création
- botiss
- Aristo Pharma
- Planet A
- Mobility Minds
20 · pressBand
Kategorie proof · keine Varianten · logoUrl je Eintrag ist Pflicht · Press Band
21 · caseStudyHighlights
Kategorie proof · keine Varianten · eine bis vier Karten · Case Study Highlight
Case Study Highlight
Eine bis vier Fallstudien-Karten. Pro Karte: Unternehmen, Headline, Herausforderung, Ergebnis, bis zu drei Kennzahlen und ein optionaler Link.
Feld company
bis zu70 %metrics[], maximal drei
Feld headline – das Ergebnis in einem Satz.
Feld outcome: was danach anders war.
Fallstudie lesen
Zweite Karte
30Teilnehmende
Karten mit mehreren Kennzahlen.
8 Wochen · 2 Gruppen
Test22 · testimonialGrid
Kategorie proof · keine Varianten · Karten hier: ohne Bild, mit Bild, mit Kennzahl-Chip · Testimonial Grid
Testimonial Grid
Der Ansatz mit den so stark personalisierten Übungen war sehr hilfreich. Das nehme ich auch für mein Team mit: Wir haben jetzt wöchentlich eine Best-Practice-Austauschrunde, in der wir die Erkenntnisse aus dem Führerschein direkt in unsere Workflows einbinden.
Charlton Payne
Learning & Development
Ich habe mir Agenten erstellt für bestimmte Bereiche und brainstorme jetzt mit denen, wenn ich etwas entwickeln muss. Und das ist super.
Anne Harders
Grafikerin
Ich fand es super, einen Gesamtüberblick über die ganzen verschiedenen Anwendungsbereiche zu bekommen, die es für KI mittlerweile gibt. Es hat sehr viel die Denkweise verändert bei mir, wie ich mich überhaupt mit dem Thema beschäftige.
Florian Pohl
Social Media Manager
Ich habe Claude eigentlich den ganzen Tag offen. Ich steuere HubSpot fast nur noch darüber aus, und das erspart mir extrem viel Zeit.
Melanie Schöning
Sales Development Representative
Ich habe mir ein eigenes Agent-Team gebaut, das für mich arbeitet – mit Requirements Engineer, Lead-Architekt, Code-Review und Security. Innerhalb von zwei Tagen haben die Agents im Hintergrund eine komplette interne Applikation von Java nach Python migriert. Das war für mich absolut mindblowing.
Matthias Rempel
Director of Delivery
Für mich waren die Sessions sehr wertvoll, ich bin einen deutlichen Schritt weitergekommen. Mein Weekly Reporting mache ich jetzt in fünf Minuten – vorher habe ich dafür eine halbe Stunde gebraucht.
Peter Hofstetter
Senior Key Account Manager
Es lohnt sich extrem: Wenn man etwas einmal generiert und länger nutzen will und dafür die stärker denkenden Modelle einsetzt, kommen ganz andere, deutlich brauchbarere Ergebnisse heraus.
Helena Schliemann
Abteilungsleiterin & Trainerin, Reformhaus®-Fachakademie
Bei mir wurde genau das erreicht, was das Ziel war: Ich verstehe ChatGPT jetzt richtig, weiß, wie es funktioniert, und kann es dadurch ganz anders anwenden – viel strukturierter, wie mit einem Führerschein eben.
Tina Wippich
Teamassistenz
Ich finde es stark, dass das nicht nur eine einmalige Schulung ist, sondern über einen längeren Zeitraum geht. Die Aufgaben bringen dich immer wieder auf neue Ideen und Impulse – dadurch habe ich mir ein paar neue Workflows und Routinen gebaut, die ich vorher so nicht hatte.
Nemo Tronnier
Geschäftsführer
Das größte Learning für mich: Statt jeden Task einzeln in einen neuen Chat einzubriefen, habe ich die Arbeiten, die immer gleich sind, einmal als GPT fest definiert. Für Content habe ich mir daraus quasi eine Live-Library gebaut, aus der ich auf Knopfdruck alles bekomme – und mein Kostenvoranschlag-Bot ist ein echter Gamechanger, weil er Zeiteinschätzungen einfach anders durchdenkt.
Marco Olbert
Senior Social Media Consultant
Der KI-Führerschein war für uns der Türöffner, um KI von einem theoretischen Konzept in echte PS auf die Straße zu verwandeln. Es ist beeindruckend zu sehen, wie Kollegen, die zuvor wenig Berührungspunkte mit dem Thema hatten, jetzt ihre eigenen GPT-Agents bauen und Prozesse automatisieren. snipKI hat uns geholfen, die Hemmschwelle zu senken und die Effizienz in der gesamten Zentrale massiv zu steigern.
Sebastian Sander
Projektmanager KI-Transformation
Der Ansatz, dass die KI Fragen stellt, um gemeinsam den perfekten Prompt zu entwickeln, war total spannend. Das Anlegen von Agenten hilft wirklich und spart enorm viel Zeit.
Dana Hansen
Vorstandsreferat
23 · wallOfLove
Kategorie proof · source: builtIn (auch custom) · Inhalt kommt hier aus dem hinterlegten Vorrat · Wall of Love
Wall of Love – Quelle builtIn
Der Ansatz mit den so stark personalisierten Übungen war sehr hilfreich. Das nehme ich auch für mein Team mit: Wir haben jetzt wöchentlich eine Best-Practice-Austauschrunde, in der wir die Erkenntnisse aus dem Führerschein direkt in unsere Workflows einbinden.
Charlton Payne
Learning & Development · ZEISS
Ich habe mir Agenten erstellt für bestimmte Bereiche und brainstorme jetzt mit denen, wenn ich etwas entwickeln muss. Und das ist super.
Anne Harders
Grafikerin · Reformhaus®
Ich fand es super, einen Gesamtüberblick über die ganzen verschiedenen Anwendungsbereiche zu bekommen, die es für KI mittlerweile gibt. Es hat sehr viel die Denkweise verändert bei mir, wie ich mich überhaupt mit dem Thema beschäftige.
Florian Pohl
Social Media Manager · Reformhaus®
Ich habe Claude eigentlich den ganzen Tag offen. Ich steuere HubSpot fast nur noch darüber aus, und das erspart mir extrem viel Zeit.
Melanie Schöning
Sales Development Representative · Device Insight
Ich habe mir ein eigenes Agent-Team gebaut, das für mich arbeitet – mit Requirements Engineer, Lead-Architekt, Code-Review und Security. Innerhalb von zwei Tagen haben die Agents im Hintergrund eine komplette interne Applikation von Java nach Python migriert. Das war für mich absolut mindblowing.
Matthias Rempel
Director of Delivery · Device Insight
Für mich waren die Sessions sehr wertvoll, ich bin einen deutlichen Schritt weitergekommen. Mein Weekly Reporting mache ich jetzt in fünf Minuten – vorher habe ich dafür eine halbe Stunde gebraucht.
Peter Hofstetter
Senior Key Account Manager · Device Insight
Es lohnt sich extrem: Wenn man etwas einmal generiert und länger nutzen will und dafür die stärker denkenden Modelle einsetzt, kommen ganz andere, deutlich brauchbarere Ergebnisse heraus.
Helena Schliemann
Abteilungsleiterin & Trainerin, Reformhaus®-Fachakademie · Reformhaus®
Bei mir wurde genau das erreicht, was das Ziel war: Ich verstehe ChatGPT jetzt richtig, weiß, wie es funktioniert, und kann es dadurch ganz anders anwenden – viel strukturierter, wie mit einem Führerschein eben.
Tina Wippich
Teamassistenz · Social DNA
Ich finde es stark, dass das nicht nur eine einmalige Schulung ist, sondern über einen längeren Zeitraum geht. Die Aufgaben bringen dich immer wieder auf neue Ideen und Impulse – dadurch habe ich mir ein paar neue Workflows und Routinen gebaut, die ich vorher so nicht hatte.
Nemo Tronnier
Geschäftsführer · Social DNA
Das größte Learning für mich: Statt jeden Task einzeln in einen neuen Chat einzubriefen, habe ich die Arbeiten, die immer gleich sind, einmal als GPT fest definiert. Für Content habe ich mir daraus quasi eine Live-Library gebaut, aus der ich auf Knopfdruck alles bekomme – und mein Kostenvoranschlag-Bot ist ein echter Gamechanger, weil er Zeiteinschätzungen einfach anders durchdenkt.
Marco Olbert
Senior Social Media Consultant · Social DNA
Der KI-Führerschein war für uns der Türöffner, um KI von einem theoretischen Konzept in echte PS auf die Straße zu verwandeln. Es ist beeindruckend zu sehen, wie Kollegen, die zuvor wenig Berührungspunkte mit dem Thema hatten, jetzt ihre eigenen GPT-Agents bauen und Prozesse automatisieren. snipKI hat uns geholfen, die Hemmschwelle zu senken und die Effizienz in der gesamten Zentrale massiv zu steigern.
Sebastian Sander
Projektmanager KI-Transformation · HolzLand
Der Ansatz, dass die KI Fragen stellt, um gemeinsam den perfekten Prompt zu entwickeln, war total spannend. Das Anlegen von Agenten hilft wirklich und spart enorm viel Zeit.
Dana Hansen
Vorstandsreferat · Kaifu-Nordland
24 · expertSpotlightGrid
Kategorie proof · keine Varianten · imageUrl ist Pflicht, kein Mediathek-Upload · Expert Spotlight Grid
Expert Spotlight Grid
Zwei bis sechs Personen mit Name, Rolle, optionaler Kurzbio und Bild.
Name (Pflicht)
Rolle (Pflicht)
bio ist optional und steht unter der Rolle.
Zweite Person
Mindestens zwei Einträge
Ohne gültige imageUrl bleibt die Karte leer – der Block hat keinen Bild-Upload.
Dritte Person
Maximal sechs Einträge
25 · whySnipki
Kategorie proof · keine Varianten · Bild hier bewusst leer gelassen · Why snipKI Section
Why snipKI Section
Dunkler Abschnitt mit Gründen
reasons[] nimmt einen bis fünf Einträge, Titel und Beschreibung jeweils Pflicht.
Bild nur aus der Mediathek
image ist ein Upload-Feld ohne URL-Fallback. Hier ist es bewusst leer gelassen.
Genau ein Link
link ist eine Gruppe, also eine Aktion am Ende des Abschnitts.
26 · teamGrid
Kategorie proof · keine Varianten · Personen kommen aus den Payload-Users, nicht aus dem Block · Team Grid
Team Grid
Der Block hat nur vier Felder. Die Personen kommen automatisch aus den Payload-Users, die für die Team-Anzeige markiert sind – gepflegt wird das unter Users, nicht hier im Block.
Jens Polomski
Co-Founder & CEO
Moritz Heininger
Co-Founder & COO
Anne Flath
Content Creatorin & KI-Trainerin
Christof Schmid
AI Consultant
Huyen Nguyen
Creative Strategist
Jan Zaiser
Content Creator & Automatisierung
Janek Dohnhauser
Team snipKI
Manuel Maier
Content Creator
Ammar Kamran
Team snipKI
Ann-Katrin Maier
Team snipKI
Cara Seitz
Team snipKI
Clemens Pfefferkorn
Team snipKI
Daniel Deniega
Team snipKI
Lina Eichhof
Team snipKI
Mareike Heininger
Team snipKI
Martina Steckert
Team snipKI
Meik Stern
Team snipKI
Pascal Poredda
Team snipKI
27 · snipDiscovery
Kategorie content · keine Varianten · echte Snip-Videos · Snip Discovery
Snip Discovery
Themenauswahl mit abspielbaren Snip-Vorschauen auf Mint-Hintergrund. Pro Eintrag sind topic, title, description, posterUrl, videoUrl und url alle Pflicht.
So funktionieren Sprachmodelle.
Wie erzeugen Sprachmodelle Antworten? Und warum liegen sie manchmal daneben?
Snip anschauenEinfach reinschauen.28 · snipBenefits
Kategorie content · keine Varianten · genau drei Einträge, nicht zwei, nicht vier · Snip Benefits
Snip Benefits
Illustrierte Strecke durch genau drei Lernvorteile. Gehört direkt unter Snip Discovery.
Erster Vorteil
Titel und Beschreibung sind Pflicht.
Zweiter Vorteil
Die Illustrationen liefert der Block, sie lassen sich nicht austauschen.
Dritter Vorteil
Der Link unten kennt nur die Darstellung default.
29 · bentoShowcase
Kategorie content · background: offwhite (auch white, darkTeal) · Töne und Spannweiten je Karte · Bento Showcase
Bento Showcase
Dichtes Kachelraster aus Text- oder Kennzahl-Karten. Pro Karte steuern tone (default, green, coral, lavender) die Farbe und span (normal, wide, tall) die Größe.
Karte: tone default, span wide
Titel und Beschreibung sind Pflicht, alles andere optional.
Karte: tone green, span normal
Mit metric und label wird aus der Textkarte eine Kennzahl-Karte.
70 % · Feld label unter der MetrikKarte: tone coral, span tall
span tall zieht die Karte über zwei Zeilen.
Karte: tone lavender, span normal
Zwei bis acht Karten sind erlaubt.
Karte: tone default, span normal
Das Raster ordnet sich responsiv neu, span ist ein Wunsch, keine Garantie.
30 · featureGrid
Kategorie content · zwei Varianten: cards und pills · beide stehen hier untereinander · Feature Grid
Feature Grid – Variante cards
Der flexible Allrounder für Features, Leistungen oder kurze Vorteile. Ein bis sechzehn Einträge. Nur der Titel ist Pflicht.
Karte mit Beschreibung
description, icon, imageUrl und imageAlt sind alle optional.
Karte mit Icon mic
Die Icon-Auswahl ist klein: mic, people, sparkles.
Karte mit Icon people
Passt kein Icon, lässt man das Feld leer.
Karte mit Icon sparkles
imageUrl setzt stattdessen ein Bild an den Kartenkopf.
Feature Grid – Variante pills auf darkTeal
Gleicher Block, Variante pills: die Einträge werden zu kompakten Chips. Gut für Aufzählungen ohne Beschreibungstext.
- Pill 1
- Pill 2
- Pill 3
- Pill 4
- Pill 5
- Pill 6
- Pill 7
- Pill 8
31 · solutions
Kategorie content · keine Varianten · bis zu vier Lösungskarten · Solutions Section
Solutions Section
Kommt nach dem Problem-Abschnitt: erklärt das Angebot und leitet auf bis zu vier Detailseiten weiter. Dazu eine optionale Checkliste mit maximal sechs Punkten.
- checklist[] – maximal sechs Punkte
- Jeder Punkt ist reiner Text
- Ohne Checkliste fällt der Bereich weg
Lösungskarte 1
Feld productNameTitel und Beschreibung sind Pflicht, productName und Link optional.
Zur Detailseite32 · businessPillars
Kategorie content · keine Varianten, keine Felder · Inhalt ist fest hinterlegt und lokalisiert · Business Pillars
Unsere drei Säulen
Chancen von KI erkennen und nutzen
Wir schaffen den Mindset-Shift und befähigen euer Team, KI täglich sicher und produktiv einzusetzen.
Mehr erfahrenKI-Projekte schnell und erfolgreich umsetzen.
Von der Strategie zur funktionierenden Lösung - reibungslos, messbar und nachhaltig integriert.
Mehr erfahrenKI von Anfang an richtig angehen.
Wir entwickeln mit euch eine klare, umsetzbare KI-Strategie und identifizieren die größten Chancen für euer Unternehmen.
Mehr erfahren33 · faq
Kategorie content · keine Varianten · hier mit zwei eigenen Kategorien, ohne Angabe greift der Standardinhalt · FAQ
FAQ
Kein Feld ist Pflicht. Ohne eigene Kategorien greift der Block auf den hinterlegten, lokalisierten Standardinhalt zurück.
Kategorie mit Titel
Zweite Kategorie
34 · content
Kategorie content · Spaltenbreiten: oneThird, half, twoThirds, full · unten als half + half · alle Label-Zeilen auf dieser Seite sind ebenfalls content-Blöcke (size full) · Content
Content
Der generische Rich-Text-Block: ein bis vier Spalten, je Spalte size, freier Rich Text und optional ein Link. Nur nehmen, wenn kein zweckgebauter Marketing-Block passt.
Zweite Spalte, ebenfalls half. Die Spaltenbreiten addieren sich nicht automatisch – zwei half ergeben eine Zeile, drei oneThird ebenso.
Der Link pro Spalte erscheint nur, wenn enableLink gesetzt ist.
35 · externalEmbed
Kategorie content · keine Varianten · nur für das freigegebene Deals-Embed · Höhe hier 700 statt der üblichen 1500 · External Embed
36 · editorialSplit
Kategorie media · layout: textLeft und textRight · background: white, offwhite, darkTeal · zwei Kombinationen untereinander · Editorial Split
Editorial Split
Zweispaltiger Abschnitt aus Text und Bild. Das Arbeitspferd für die Seitenmitte: einmal Text links, einmal Text rechts, im Wechsel. layout, background und headingLevel sind Pflicht, links[] nimmt maximal einen Eintrag.
Genau eine Aktion
Editorial Split – gespiegelt auf darkTeal
Derselbe Block mit layout textRight und background darkTeal. So entsteht der Wechsel-Rhythmus durch die Seite. headingLevel h1 nur setzen, wenn der Abschnitt wirklich die Hauptüberschrift der Seite trägt.
37 · imageBento
Kategorie media · background: offwhite (auch white, darkTeal) · imageUrl je Karte ist Pflicht · Image Bento
Image Bento
Wie Bento Showcase, nur mit Bild je Karte. imageUrl ist Pflicht und erwartet einen öffentlichen Pfad – es gibt keine Mediathek-Auswahl. Wenn die Illustrationen fehlen, ist bentoShowcase die richtige Wahl.
Karte: span wide, tone default
Titel, Beschreibung und imageUrl sind Pflicht.
Karte: span normal, tone green
span kennt hier nur normal und wide, kein tall.
Karte: span normal, tone coral
Zwei bis acht Karten.
Karte: span normal, tone lavender
Töne: default, green, coral, lavender.
38 · mediaBlock
Kategorie media · keine Varianten · ein Feld: ein Element aus der Mediathek · Media Block
39 · rolePathGrid
Kategorie navigation · keine Varianten · hier alle sechs Icons und fünf Akzentfarben · Role Path Grid
Role Path Grid
Karten, mit denen Besucher sich selbst einsortieren. Drei bis sechs Rollen, jede mit festem Icon und Akzentfarbe. Für eigene Rollen das Icon custom nehmen.
Icon marketing, Akzent green
Titel, Beschreibung, Icon und Akzent sind Pflicht.
Icon hr, Akzent coral
href verlinkt auf die rollenspezifische Seite.
Icon sales, Akzent mint
imageUrl ersetzt die Illustration durch ein eigenes Bild.
Icon leadership, Akzent amber
Akzente: green, coral, mint, amber, teal.
Icon operations, Akzent teal
Icons: marketing, hr, sales, leadership, operations, custom.
Icon custom, Akzent green
custom nehmen, wenn keine der fünf Standardrollen passt.
40 · resourceShowcase
Kategorie navigation · vier Modi: newsletter, deals, tool, facts · hier newsletter und facts untereinander · Resource Showcase
Resource Showcase – Modus newsletter
Führt zu einem konkreten Angebot: Newsletter, Deals, Tool oder Faktenblatt. mode ändert die Darstellung, der Feldsatz bleibt gleich. Zwei bis acht Fakten, zwei bis sechs Karten.
- facts[].label
- facts[].value
- Mindestens
- 2 Fakten
- Höchstens
- 8 Fakten
snipKI Newsletter
Diese Woche wichtig
Karte 1
Titel und Beschreibung sind Pflicht, kicker optional.
Karte 2
Zwei bis sechs Karten.
Resource Showcase – Modus facts
Derselbe Block im Modus facts. Die weiteren Modi sind deals (siehe snipKI Deals) und tool.
- Modi
- 4
- newsletter
- deals
- tool
- facts
Berlin. Lernen. Strategie. Umsetzung.
Karte 1
Im Modus facts stehen die Fakten im Vordergrund.
Karte 2
Die Karten bleiben als Erläuterung darunter.
41 · archive
Kategorie navigation · populateBy: collection (auch selection) · zieht echte Beiträge aus Posts · Archive
42 · marketingCta
Kategorie conversion · zwei Varianten: gradientCard und darkBand · beide untereinander · Marketing CTA
Marketing CTA – Variante gradientCard
Der Standard-Abschluss einer Marketingseite. Titel und Beschreibung sind Pflicht, maximal zwei Aktionen.
Marketing CTA – Variante darkBand
Derselbe Block als durchgehendes dunkles Band statt als Karte mit Verlauf. Nur variant umstellen.
43 · cta
Kategorie conversion · keine Varianten · nur wenn Marketing CTA die Formatierung nicht hergibt · Call to Action
44 · stoerer
Kategorie conversion · acht Farbvarianten: coral, green, darkTeal, lavender, lime, orange, cream, offwhite · alle acht folgen untereinander · Störer
45 · pricingSection
Kategorie conversion · keine Varianten · hier alle drei Karten ohne Stripe-Anbindung, damit niemand versehentlich im Checkout landet · Pricing Section
Zertifikate und Fortschrittsnachweise inklusive
Pricing Section
Eine bis drei Preiskarten. billingPlanKey verbindet eine Karte mit einem Stripe-Lernplan – dann kommen Preis und Checkout-Link live von Stripe. Karten ohne Plan bekommen none und einen eigenen priceLabel.
Karte ohne Stripe-Plan
billingPlanKey none, Preis über priceLabel gesetzt.
Feld ctaLabelIndividuelles Angebot
- features[] – mindestens ein Eintrag
- Jeder Eintrag ist reiner Text
Karte mit featured
Feld badgefeatured hebt genau eine Karte hervor, badge setzt das Label darauf.
Feld ctaLabel49 €
pro Monat
- amount ist eine Zahl, period der Text darunter
- priceSuffix steht direkt hinter dem Preis
- footerNote erscheint unter dem Button
Dritte Karte
Mehr als drei Karten nimmt der Block nicht an.
Feld ctaLabelAuf Anfrage
- Alle Links hier zeigen bewusst ins Leere
46 · inquiryBand
Kategorie conversion · keine Varianten · hängt am echten Formular „snipKI Kontakt“, bitte nichts abschicken · Inquiry Band
Inquiry Band
Das Lead-Formular mit Marketing-Kontext. form verweist auf ein Payload-Formular. Absendungen landen echt in Payload, also auf dieser Seite bitte nichts abschicken.
Feld valueTitle
- valuePoints[] – ein bis sechs Punkte
- Stehen neben dem Formular
- Ohne Punkte fällt die Spalte weg
47 · formBlock
Kategorie conversion · keine Varianten · Intro zuschaltbar · ebenfalls am echten Formular, bitte nichts abschicken · Form Block