Component catalog Studio →

Banner01

Saisonale Ansage (Ferien, Vertretung). Ersetzt Popups.

Blog01

Blog02

CaseStack01

Referenzen als Kartenstapel — jede Karte bleibt kurz stehen, die naechste schiebt sich darueber. Ohne motion eine gewoehnliche Kartenliste.

WorkDetail01

Eine Werk- oder Projektseite: Bild in voller Breite (stacked) oder links neben den Angaben (split, fuer Hochformate), Angaben als Haarlinien-Zeilen, Text und Anfrage-Link, unten Vor und Zurueck. Seitenkopf einer Detailseite, kein Block innerhalb einer Seite. Optional Preis/Preis auf Anfrage und Kaufanfrage als aufklappbares Formular (Feld item) am Werk.

TablePlanner01

Esstisch-Planer für Tischlereien: Raum, Personen, Form, Holz und Gestell ergeben Draufsicht, Seitenansicht, Empfehlung und Richtpreis (Sätze der Werkstatt als Props: woods, frames, hourlyRate, finishPricePerM2; showPrice=false blendet den Preis für Besucher aus). Die Anfrage geht an das Formular-Modul des Betriebs (formAction wie Contact02, dasselbe Modul reicht): Planung, Zuschnitt und Link zur Planung stehen im Feld message, optional phone. Braucht JavaScript; ohne Skript Startzustand und Nachrichtenformular. Eingabe-Beschriftungen fest deutsch. Zeichnung aus Tokens, nur Holztöne als Materialfarbe. Ein Planer je Seite und nicht zusammen mit Contact02 (?table= in der Adresse, beide reagieren auf ?gesendet=1). Composer bietet sie noch nicht an (kein Slot configurator, kein Eintrag in rubrics.json), siehe ops/CONFIGURATORS.md.

Contact01

Kontaktkarten ohne Formular. Als Wiederholblock Chrome, auf /kontakt Inhalt.

Contact02

Einziges Modul mit echtem Formular (f.nordwerk.studio). Telefon, E-Mail, Adresse, Zeiten je optional (leer = ausgeblendet). Optional Telefonfeld (formPhoneLabel) und Betreff-Auswahl (subjects); das Modul braucht dann die Felder phone und subject. ?thema= fuellt die Nachricht vor. messageRequired folgt dem Modulfeld message (false = optional); privacyHref verlinkt die Datenschutzerklaerung hinter dem Einwilligungstext.

Contact03

Anfahrt mit Bild, Wochentagen und Parkhinweis.

Cta01

Ein Weg, mit Nebensatz.

Cta02

Zwei gleichwertige Wege (Telefon und WhatsApp).

Cta03

Zwei Wege nebeneinander, von denen einer angekuendigt statt geoeffnet sein darf (secondaryState=bald): Direktdownload jetzt, Store spaeter. Der angekuendigte Weg ist bewusst kein Link.

Faq01

Faq02

FAQ mit Kontakt-Ausweg daneben.

FeatureRail01

Leistungen als kuratierte Reihe. Ab etwa sechs gleichrangigen Leistungen ruhiger als ein Raster.

Features01

Genau drei, feste Icons (leaf/ruler/handshake).

Features02

Alternierend Bild/Text — braucht je Eintrag ein Bild.

Features03

Nummerierte Karten, optionaler Link je Karte.

Features04

Mit Preisangabe je Leistung.

FeatureSplit01

Bild und Text laufen beim Scrollen unterschiedlich schnell (Parallaxe). Braucht ein Bild, das die Bewegung traegt. imageRatio=landscape fuer breites Material wie Anwendungsfenster oder Karten; Default bleibt hochkant. imageSide=right stellt das Bild ab Tablet rechts, damit mehrere Splits abwechseln.

Footer01

Vierspaltiger Fuss mit Wortmarke, Leistungen, Kontakt und Rechtlichem. Spaltentitel und Ziel der Wortmarke sind Props (fuer weitere Sprachen), logoMark/logoSrc wie Navbar05. Spaltentitel folgen dem Profilschalter type.metaCase.

Footer02

Footer mit eingebautem Abschluss-CTA.

Gallery01

Gallery02

Gallery03

Vorher/Nachher — braucht genau zwei passende Bilder.

GalleryRail01

Bildreihe mit echtem Wischen und Pfeilen. Fuer wachsende Referenzmengen; Grid nutzen, wenn alles auf einen Blick soll.

WorkGrid01

Werkverzeichnis: Raster ohne Rahmen, unter jedem Bild Titel links und Angabe rechts in der Meta-Schrift, Zaehler in der Kopfzeile. Optional ein Textlink zur Uebersicht (moreLabel) fuer eine Auswahl.

Hero01

Zwei Wege im Hero. Karte im Bild nur über cardText (seit 02.09.2026; vorher hart kodierter Demo-Satz).

Hero02

Zentrierter Auftakt mit Panorama-Bild; imageRatio wide (16:7), landscape (4:3) oder portrait (4:5) — Hochformat nicht mehr auf 16:7 beschneiden.

Hero03

Fest dunkel — färbt die eigene Fläche, kein Ton wählbar.

Hero04

Hero mit Zeiten-Karte. Der Standard für Praxis und Handwerk.

Hero05

Textauftakt ohne Bild, auf der Displaygroesse aus den Typo-Tokens. Fuer Seiten, die mit einer Aussage statt mit einem Foto beginnen.

Hero06

Zentrierte Aussage in Displaygröße, darunter eine Reihe kurzer Belege. Kein Bild, kein Knopf. Zentriert trägt eine Zeile etwa 15 bis 17 Zeichen.

Hero07

Zentrierter Produktauftakt: Zeichen, Aussage, Vorspann, zwei Wege — darunter randabfallend das Bild. Braucht Signet und Bild.

Hero08

Zentrierte Aussage mit Haarlinie darunter; Vorspann links und Handlung rechts stehen unter der Linie. Für Seiten, deren Kopf schon eine Navigation trägt.

Hero09

Druckkopf: zentriert im groessten Grad des Profils, ohne Navigation und ohne Bild. Optionaler zweiter Weg, der mit secondaryState=bald angekuendigt statt geoeffnet wird. Traegt nur sehr kurze Saetze — in scale=gross bricht eine Zeile bei etwa 13 Zeichen.

Hero10

Textkopf: ein Satz in Displaygroesse, Meta-Zeile darueber, hoechstens ein Textlink. Kein Bild, kein Knopf; die Bilder folgen im naechsten Abschnitt.

Hours01

Mit Hinweisfeld für Abweichungen. Unter 640 px stehen Tag und Zeit untereinander.

Logos01

Genau fünf Partner, nur Text.

Logos02

Drei bis acht Partner als Bildmarke oder Wortmarke, optional verlinkt. Ersetzt die feste Fünferzahl von Logos01.

LogoTicker01

Laufendes Band statt fester Zeile. Lohnt ab acht Namen; darunter reicht Logos01. Haelt bei prefers-reduced-motion an.

MediaWiden01

Ein Bild ueber die volle Breite, das beim Scrollen aus einem schmalen Ausschnitt herauswaechst. Traegt keine Ueberschrift, nur eine Bildunterschrift. frame=inset endet eingerueckt und rund in der Inhaltsbreite, ohne Zoom und im Seitenverhaeltnis des Bildes (fuer Bilder mit wichtigen Raendern, z. B. mehrere Geraete).

ProductShot01

App-Screenshots in Geraeterahmen (iphone, watch, mac) auf einer eingerueckten runden Flaeche; Rahmen und Flaeche aus CSS, Screenshot ungeschnitten, darkSrc als Dark-Mode-Paar per prefers-color-scheme. layout=stage zeigt 1-3 Geraete unter mittiger Ueberschrift (crop=bottom schneidet an der Unterkante), layout=split stellt ein Geraet neben den Text (imageSide wechselt ab). backdrop=tint leitet das Pastell aus brand ab. Braucht echte Screenshots ohne Rahmen.

Navbar01

Navbar02

Mit Kontakt-Topbar. Bildlogo möglich. scroll=fade: bleibt oben, blendet beim Scrollen nach unten aus und nach oben ein. Links brechen nicht um (whitespace-nowrap); höchstens fünf Links mit kurzen Labels, sonst wird die Zeile zu breit.

Navbar03

Nur Wortmarke und Menüzeichen, ohne Unterkante. Die Navigation klappt als Liste auf. Für Seiten, die mit einer Aussage beginnen statt mit einer Menüleiste. scroll=fade: bleibt oben, blendet beim Scrollen nach unten aus und nach oben ein.

Navbar04

Wortmarke, Sprungmarken und eine Handlung auf einer Zeile, ohne Unterkante. Für lange einseitige Auftritte.

Navbar05

Eine Zeile aus Wortmarke und Standortangabe (oder einem Link), darunter eine Haarlinie. Kein Menue — die Wegweisung uebernimmt der Fuss. logoMark=nordwerk setzt das Nordwerk-Zeichen mit Punktfarbe (logoMarkColor) vor die Wortmarke, logoSrc ein Bildlogo. Mehrsprachige Sites bekommen rechts automatisch einen Sprachumschalter.

NotFound01

AudienceSplit01

CompanyMosaic01

IntegrationMatrix01

Navbar01

Fest dunkel.

PressMentions01

ProductIndex01

QuoteRail01

StoryReel01

Menu01

Speisekarte für Café, Restaurant, Imbiss, Bäckerei. items zählt Kategorien, je Kategorie etwa 2 bis 15 Einträge (Name, Beschreibung, Preis, optional vegetarisch/vegan). Ab zwei Kategorien Sprunglinks (nicht sticky), ab lg zwei Spalten. Ohne JavaScript. structuredData gibt schema.org/Menu aus, Offer nur bei einer einzelnen Zahl als Preis; menuName setzen („Speisekarte <Betrieb>“), sonst gilt title. Für eine kurze Preisliste ohne Kategorien Pricing02.

Pricing01

Pricing02

Pricing03

Article01

Langtext: Absätze, Zwischentitel, Zitate und Bilder, die aus der Textspalte ausbrechen (left/right/wide/full). Seitenteil Langtext auf der Seite über eine Person.

Prose01

Absätze, Aufzählungen, Begriffspaare. Trägt auch Impressum.

Statement01

Zwei grosse Zeilen als Zaesur zwischen zwei Kapiteln einer Seite. Kein Bild, kein Knopf.

ReferenceList01

Auftraggeber als Namensliste (Name, Ort, Art) ohne Logos, optional nach Art gruppiert. Für Betriebe, deren Beleg eine lange Kundenliste ist.

Cta01

FeatureGrid01

FeatureList01

Footer01

Hero01

LogoRow01

Navbar01

Outcomes01

premium/IntegrationMatrix01

Pricing01

Quote01

ScreenshotSection01

Stats01

Genau vier Werte.

Steps01

Nummeriert.

Steps02

PersonIntro01

Eine Person: Meta-Zeile links, kleines quadratisches Portrait mit Satz und kurzem Text rechts, Textlink. Trägt ein kleines Profilbild; ohne Telefon.

Team01

Braucht je Person ein Bild. Vier Spalten, bis 16 Personen.

Team02

Eine Person mit Porträt und Unterschrift.

TeamList01

Team als dichte Liste mit Initialen-Kreis oder kleinem Porträt, optional gruppiert. Für viele Mitarbeitende ohne oder mit lückenhaften Fotos.

Testimonial01

Testimonial02

Testimonial03

TestimonialRail01

Kurze Zitate nebeneinander. Die Menge ist der Beleg; fuer ein einzelnes starkes Zitat ungeeignet.

TestimonialSolo01

Ein Zitat gleichzeitig, gross gesetzt. Fuer wenige, dafuer lange und tragende Stimmen; bei vielen kurzen die Reihe oder die Wand nehmen.

TestimonialWall01

Viele kurze Stimmen als Wand: zusammengefaltet laufen zwei gegenlaeufige Reihen, ein Knopf oeffnet das Gitter. Die Menge ist die Aussage — unter sechs Stimmen faltet sie sich gar nicht erst zusammen.

DarkEnd01

Marke, keine Section: ab hier ist die Seite wieder hell. Ohne diese Marke laeuft die dunkle Zone bis zum Seitenende.

DarkStart01

Marke, keine Section: ab hier kippt die ganze Seite ins Dunkle. Zeichnet nichts. Der Renderer wickelt alles bis zur Endmarke in .tone-takeover. Genau ein Paar pro Seite.