RITTEK BLOCKS / Marketing
Marketing. Direkt einsetzbar. Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.
Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.
Split Hero · Klarer Kurs Bento Features · Ein System Preise · Transparent planen FAQ · Gute Antworten Team · Menschen mit Haltung Kontakt · Das nächste Gespräch
Studio Nord / Digitale Arbeitsräume
Mehr Klarheit.Weniger Umwege.
Dein Team verdient einen Arbeitsplatz, der mitdenkt. Verbinde Projekte, Menschen und Entscheidungen in einer ruhigen, klaren Oberfläche.
Gedacht für Kleine Teams
Im Mittelpunkt Dein Workflow
Von Anfang an Übersichtlich
Workspace / Übersicht Im Flow
Dein nächster Meilenstein
Website gemeinsam starten
Dekorative Darstellung eines stetigen Projektfortschritts.
Eine Entscheidung, ein klarer Ort. Briefing abgestimmt · Nächster Schritt: Entwurf
HTML · inklusive Stylesheets und Modul-Einbindung Code kopieren
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Split Hero · Klarer Kurs · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-columns" id="bm-hero" aria-labelledby="bm-hero-title">
<div class="bm-stack-lg">
<p class="bm-eyebrow">Studio Nord / Digitale Arbeitsräume</p>
<h2 class="bm-title" id="bm-hero-title">Mehr Klarheit.<br>
<em>Weniger Umwege.</em>
</h2>
<p class="bm-lead">Dein Team verdient einen Arbeitsplatz, der mitdenkt. Verbinde Projekte, Menschen und Entscheidungen in einer ruhigen, klaren Oberfläche.</p>
<div class="bm-actions">
<a class="r-button r-button-primary" href="/docs/">Möglichkeiten entdecken</a>
<a class="r-button" href="#bm-hero-details">Unser Ansatz</a>
</div>
<dl class="bm-metrics" id="bm-hero-details">
<div>
<dt>Gedacht für</dt>
<dd>Kleine Teams</dd>
</div>
<div>
<dt>Im Mittelpunkt</dt>
<dd>Dein Workflow</dd>
</div>
<div>
<dt>Von Anfang an</dt>
<dd>Übersichtlich</dd>
</div>
</dl>
</div>
<div class="bm-board bm-stack" aria-label="Illustrative Projektvorschau, keine echten Geschäftsdaten">
<div class="bm-board-top">
<strong>Workspace / Übersicht</strong>
<span class="bm-small">
<span class="bm-dot" aria-hidden="true">
</span>Im Flow</span>
</div>
<div>
<p class="bm-small bm-muted">Dein nächster Meilenstein</p>
<h3 class="bm-subheading">Website gemeinsam starten</h3>
</div>
<div class="bm-bars" aria-hidden="true">
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</div>
<p class="bm-small bm-muted">Dekorative Darstellung eines stetigen Projektfortschritts.</p>
<div class="bm-board-note">
<strong>Eine Entscheidung, ein klarer Ort.</strong>
<p class="bm-small bm-muted">Briefing abgestimmt · Nächster Schritt: Entwurf</p>
</div>
</div>
</section>
</body>
</html>
01 / ZUSAMMENARBEIT Ein gemeinsamer Blick auf das Wesentliche. Halte Entscheidungen, Aufgaben und Kontext zusammen. So kann jedes Teammitglied nachvollziehen, warum der nächste Schritt wichtig ist.
Projekte Verantwortung Transparenz
02 / STRUKTUR Ordnung, die bleibt. Klare Zuständigkeiten und nachvollziehbare Abläufe statt verstreuter Notizen.
03 / FOKUS Weniger Ablenkung. Eine ruhige Oberfläche macht die nächste sinnvolle Handlung sichtbar.
04 / FLEXIBILITÄT Dein eigener Rhythmus. Vom kompakten Projektboard zur großzügigen Übersicht – passend zu deinem Team.
05 / KONTINUITÄT Heute starten. Morgen erweitern. Baue Schritt für Schritt auf einer verständlichen, konsistenten Grundlage auf.
HTML · inklusive Stylesheets und Modul-Einbindung Code kopieren
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bento Features · Ein System · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-stack-lg" id="bm-features" aria-labelledby="bm-features-title">
<header class="bm-stack">
<p class="bm-eyebrow">Die richtige Grundlage</p>
<h2 class="bm-heading" id="bm-features-title">Nicht mehr Werkzeuge.<br>Mehr Zusammenspiel.</h2>
<p class="bm-lead">Ein durchdachtes System schafft Raum für die eigentliche Arbeit – vom ersten Gedanken bis zum letzten Detail.</p>
</header>
<div class="bm-bento">
<article class="bm-tile bm-tile-wide bm-tile-accent">
<span class="bm-index">01 / ZUSAMMENARBEIT</span>
<h3 class="bm-subheading">Ein gemeinsamer Blick auf das Wesentliche.</h3>
<p class="bm-muted">Halte Entscheidungen, Aufgaben und Kontext zusammen. So kann jedes Teammitglied nachvollziehen, warum der nächste Schritt wichtig ist.</p>
<div class="bm-token-row">
<span class="bm-token">Projekte</span>
<span class="bm-token">Verantwortung</span>
<span class="bm-token">Transparenz</span>
</div>
</article>
<article class="bm-tile">
<span class="bm-index">02 / STRUKTUR</span>
<h3 class="bm-subheading">Ordnung, die bleibt.</h3>
<p class="bm-muted">Klare Zuständigkeiten und nachvollziehbare Abläufe statt verstreuter Notizen.</p>
</article>
<article class="bm-tile">
<span class="bm-index">03 / FOKUS</span>
<h3 class="bm-subheading">Weniger Ablenkung.</h3>
<p class="bm-muted">Eine ruhige Oberfläche macht die nächste sinnvolle Handlung sichtbar.</p>
</article>
<article class="bm-tile">
<span class="bm-index">04 / FLEXIBILITÄT</span>
<h3 class="bm-subheading">Dein eigener Rhythmus.</h3>
<p class="bm-muted">Vom kompakten Projektboard zur großzügigen Übersicht – passend zu deinem Team.</p>
</article>
<article class="bm-tile">
<span class="bm-index">05 / KONTINUITÄT</span>
<h3 class="bm-subheading">Heute starten. Morgen erweitern.</h3>
<p class="bm-muted">Baue Schritt für Schritt auf einer verständlichen, konsistenten Grundlage auf.</p>
</article>
</div>
</section>
</body>
</html>
Beispieltarife / keine echten Angebote
Passend für deinen nächsten Schritt. Die Zahlen zeigen die Funktion dieser Vorlage. Alle Beträge sind beispielhafte Gesamtpreise pro Team, nicht pro Person.
Monatlich Jährlich · günstiger pro Monat
Ohne JavaScript gelten die angezeigten Monatspreise. Kein Kauf und keine Zahlung in dieser Demo.
Studio
Für einen guten Anfang. 29 € / Monat
Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.
Ein gemeinsamer Workspace Bis zu 5 Teammitglieder Unbegrenzte Notizen Standard-Projektansichten Studio ansehen
Scale / mehr Spielraum
Wenn dein Team wächst. 59 € / Monat
Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.
Alles aus Studio Bis zu 20 Teammitglieder Mehrere Projektbereiche Erweiterte Übersichten Scale ansehen
Individuell
Für besondere Abläufe. Im Gespräch
Umfang und Preis werden gemeinsam festgelegt. Kein Standard-Abonnement.
Individuelle Teamgröße Abgestimmte Einführung Eigene Integrationen Persönliche Ansprechperson Bedarf vormerken
HTML · inklusive Stylesheets und Modul-Einbindung Code kopieren
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Preise · Transparent planen · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-stack-lg" id="bm-pricing" data-bm-pricing aria-labelledby="bm-pricing-title">
<header class="bm-stack">
<p class="bm-eyebrow">Beispieltarife / keine echten Angebote</p>
<h2 class="bm-heading" id="bm-pricing-title">Passend für deinen nächsten Schritt.</h2>
<p class="bm-lead">Die Zahlen zeigen die Funktion dieser Vorlage. Alle Beträge sind beispielhafte Gesamtpreise pro Team, nicht pro Person.</p>
<div class="bm-price-switch" role="group" aria-label="Abrechnungszeitraum">
<button class="r-button" type="button" data-bm-cycle="monthly" aria-pressed="true">Monatlich</button>
<button class="r-button" type="button" data-bm-cycle="yearly" aria-pressed="false">Jährlich · günstiger pro Monat</button>
</div>
<p class="bm-small bm-muted">Ohne JavaScript gelten die angezeigten Monatspreise. Kein Kauf und keine Zahlung in dieser Demo.</p>
</header>
<div class="bm-pricing-grid">
<article class="bm-plan" data-bm-plan="studio">
<p class="bm-eyebrow">Studio</p>
<h3 class="bm-subheading">Für einen guten Anfang.</h3>
<p class="bm-price">
<span data-bm-amount>29 €</span> <small>/ Monat</small>
</p>
<p class="bm-small bm-muted bm-billing" data-bm-billing>Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.</p>
<ul>
<li>Ein gemeinsamer Workspace</li>
<li>Bis zu 5 Teammitglieder</li>
<li>Unbegrenzte Notizen</li>
<li>Standard-Projektansichten</li>
</ul>
<button class="r-button" type="button" data-bm-select="Studio">Studio ansehen</button>
</article>
<article class="bm-plan bm-plan-featured" data-bm-plan="scale">
<p class="bm-eyebrow">Scale / mehr Spielraum</p>
<h3 class="bm-subheading">Wenn dein Team wächst.</h3>
<p class="bm-price">
<span data-bm-amount>59 €</span> <small>/ Monat</small>
</p>
<p class="bm-small bm-muted bm-billing" data-bm-billing>Monatlich abgerechnet. Jederzeit zum Laufzeitende kündbar.</p>
<ul>
<li>Alles aus Studio</li>
<li>Bis zu 20 Teammitglieder</li>
<li>Mehrere Projektbereiche</li>
<li>Erweiterte Übersichten</li>
</ul>
<button class="r-button r-button-primary" type="button" data-bm-select="Scale">Scale ansehen</button>
</article>
<article class="bm-plan">
<p class="bm-eyebrow">Individuell</p>
<h3 class="bm-subheading">Für besondere Abläufe.</h3>
<p class="bm-price">Im Gespräch</p>
<p class="bm-small bm-muted bm-billing">Umfang und Preis werden gemeinsam festgelegt. Kein Standard-Abonnement.</p>
<ul>
<li>Individuelle Teamgröße</li>
<li>Abgestimmte Einführung</li>
<li>Eigene Integrationen</li>
<li>Persönliche Ansprechperson</li>
</ul>
<button class="r-button" type="button" data-bm-select="Individuell">Bedarf vormerken</button>
</article>
</div>
<p class="bm-small bm-muted bm-status" data-bm-pricing-status role="status">
</p>
</section>
<script type="module">
import {initMarketingBlocks} from 'https://ui.rittek.de/assets/modules/blocks-marketing.js';
const cleanup = initMarketingBlocks(document.getElementById('bm-pricing'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>
Gut zu wissen
Ein paar Fragen. Klare Antworten. Die wichtigsten Informationen für deinen Start. Die Antworten sind Beispieltexte und sollten an dein tatsächliches Angebot angepasst werden.
Mehrere Antworten können gleichzeitig geöffnet bleiben.
Für wen ist das Angebot gedacht? Für kleine und wachsende Teams, die ihre Projekte gemeinsam strukturieren möchten. Der Schwerpunkt liegt auf verständlichen Abläufen und einer klaren Übersicht.
Wie aufwendig ist der Einstieg? Beginne mit einem Workspace und einem ersten Projekt. Ergänze weitere Bereiche erst dann, wenn sie für deinen Arbeitsalltag hilfreich sind.
Kann ich bestehende Abläufe übernehmen? Die Vorlage lässt Raum für eigene Prozesse. Welche Daten oder Integrationen übernommen werden können, muss für die konkrete Anwendung gesondert geprüft werden.
Was bedeutet jährliche Abrechnung? Bei einem Jahrestarif wird der gesamte Jahresbetrag auf einmal abgerechnet. Der angezeigte Monatspreis dient dem Vergleich. Die Demo zeigt beide Beträge ausdrücklich an.
Werden hier bereits Daten gespeichert? Diese Marketingblöcke sind lokale Demonstrationen. Paketauswahl und Kontaktformular versenden keine Daten und benötigen keine Anmeldung.
Wie passe ich die Gestaltung an? Farben, Schrift und Dichte folgen den Rittek-Tokens deiner Seite. Inhalte und Komponenten lassen sich unabhängig davon anpassen.
HTML · inklusive Stylesheets und Modul-Einbindung Code kopieren
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>FAQ · Gute Antworten · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-columns" id="bm-faq" aria-labelledby="bm-faq-title">
<header class="bm-stack">
<p class="bm-eyebrow">Gut zu wissen</p>
<h2 class="bm-heading" id="bm-faq-title">Ein paar Fragen.<br>Klare Antworten.</h2>
<p class="bm-lead">Die wichtigsten Informationen für deinen Start. Die Antworten sind Beispieltexte und sollten an dein tatsächliches Angebot angepasst werden.</p>
<p class="bm-small bm-muted">Mehrere Antworten können gleichzeitig geöffnet bleiben.</p>
</header>
<div class="bm-faq">
<details open>
<summary>Für wen ist das Angebot gedacht?</summary>
<p>Für kleine und wachsende Teams, die ihre Projekte gemeinsam strukturieren möchten. Der Schwerpunkt liegt auf verständlichen Abläufen und einer klaren Übersicht.</p>
</details>
<details>
<summary>Wie aufwendig ist der Einstieg?</summary>
<p>Beginne mit einem Workspace und einem ersten Projekt. Ergänze weitere Bereiche erst dann, wenn sie für deinen Arbeitsalltag hilfreich sind.</p>
</details>
<details>
<summary>Kann ich bestehende Abläufe übernehmen?</summary>
<p>Die Vorlage lässt Raum für eigene Prozesse. Welche Daten oder Integrationen übernommen werden können, muss für die konkrete Anwendung gesondert geprüft werden.</p>
</details>
<details>
<summary>Was bedeutet jährliche Abrechnung?</summary>
<p>Bei einem Jahrestarif wird der gesamte Jahresbetrag auf einmal abgerechnet. Der angezeigte Monatspreis dient dem Vergleich. Die Demo zeigt beide Beträge ausdrücklich an.</p>
</details>
<details>
<summary>Werden hier bereits Daten gespeichert?</summary>
<p>Diese Marketingblöcke sind lokale Demonstrationen. Paketauswahl und Kontaktformular versenden keine Daten und benötigen keine Anmeldung.</p>
</details>
<details>
<summary>Wie passe ich die Gestaltung an?</summary>
<p>Farben, Schrift und Dichte folgen den Rittek-Tokens deiner Seite. Inhalte und Komponenten lassen sich unabhängig davon anpassen.</p>
</details>
</div>
</section>
</body>
</html>
Marketing
Team · Menschen mit Haltung Drei Teamprofile mit Initialen, Rollen, ausführlichem Fokus und zugänglicher Darstellung ohne Bildabhängigkeit.
Vollständiges HTML herunterladen ↧ Beispielteam / fiktive Profile
Gute Arbeit beginnt mit guten Verbindungen. Drei Perspektiven, eine gemeinsame Haltung: Dinge verständlich machen und mit Sorgfalt umsetzen.
LM
Lena Morgen Strategie & Produkt
Verbindet die Ziele eines Unternehmens mit den Bedürfnissen der Menschen, die täglich mit dem Produkt arbeiten.
Fokus: die richtigen Fragen stellen.
JK
Jonas Kern Design & Systeme
Entwickelt klare visuelle Systeme, die Orientierung geben und Raum für einen eigenen Charakter lassen.
Fokus: Konsistenz bis ins Detail.
AS
Alex Sommer Entwicklung & Qualität
Macht aus guten Ideen belastbare Oberflächen und achtet darauf, dass sie im Alltag angenehm bedienbar bleiben.
Fokus: verständliche Technik.
HTML · inklusive Stylesheets und Modul-Einbindung Code kopieren
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Team · Menschen mit Haltung · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-stack-lg" id="bm-team" aria-labelledby="bm-team-title">
<header class="bm-stack">
<p class="bm-eyebrow">Beispielteam / fiktive Profile</p>
<h2 class="bm-heading" id="bm-team-title">Gute Arbeit beginnt<br>mit guten Verbindungen.</h2>
<p class="bm-lead">Drei Perspektiven, eine gemeinsame Haltung: Dinge verständlich machen und mit Sorgfalt umsetzen.</p>
</header>
<div class="bm-team-grid">
<article class="bm-person">
<div class="bm-initials" aria-hidden="true">LM</div>
<div>
<h3 class="bm-subheading">Lena Morgen</h3>
<p class="bm-small bm-muted">Strategie & Produkt</p>
</div>
<p>Verbindet die Ziele eines Unternehmens mit den Bedürfnissen der Menschen, die täglich mit dem Produkt arbeiten.</p>
<p class="bm-small bm-muted">Fokus: die richtigen Fragen stellen.</p>
</article>
<article class="bm-person">
<div class="bm-initials" aria-hidden="true">JK</div>
<div>
<h3 class="bm-subheading">Jonas Kern</h3>
<p class="bm-small bm-muted">Design & Systeme</p>
</div>
<p>Entwickelt klare visuelle Systeme, die Orientierung geben und Raum für einen eigenen Charakter lassen.</p>
<p class="bm-small bm-muted">Fokus: Konsistenz bis ins Detail.</p>
</article>
<article class="bm-person">
<div class="bm-initials" aria-hidden="true">AS</div>
<div>
<h3 class="bm-subheading">Alex Sommer</h3>
<p class="bm-small bm-muted">Entwicklung & Qualität</p>
</div>
<p>Macht aus guten Ideen belastbare Oberflächen und achtet darauf, dass sie im Alltag angenehm bedienbar bleiben.</p>
<p class="bm-small bm-muted">Fokus: verständliche Technik.</p>
</article>
</div>
</section>
</body>
</html>
HTML · inklusive Stylesheets und Modul-Einbindung Code kopieren
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kontakt · Das nächste Gespräch · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-marketing.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bm-block bm-columns" id="bm-contact" aria-labelledby="bm-contact-title">
<header class="bm-stack">
<p class="bm-eyebrow">Kontakt / lokale Demonstration</p>
<h2 class="bm-heading" id="bm-contact-title">Was hast du vor?</h2>
<p class="bm-lead">Erzähl uns von deiner Idee. Diese Vorlage zeigt die Bedienung eines Kontaktformulars – sie stellt keine echte Kontaktaufnahme her.</p>
<div class="bm-board-note">
<h3 class="bm-subheading">Nur zum Ausprobieren.</h3>
<p class="bm-small bm-muted">Bitte keine persönlichen oder vertraulichen Angaben eingeben. Die Felder werden lokal geprüft; nichts wird versendet oder gespeichert.</p>
</div>
</header>
<form class="bm-stack" method="dialog" data-bm-contact aria-label="Demo-Kontaktformular">
<div class="bm-contact-fields">
<div>
<label class="r-label" for="bm-contact-name">Name *</label>
<input class="r-input" id="bm-contact-name" name="name" type="text" required minlength="2" maxlength="80" autocomplete="off">
</div>
<div>
<label class="r-label" for="bm-contact-email">E-Mail *</label>
<input class="r-input" id="bm-contact-email" name="email" type="email" required maxlength="120" autocomplete="off">
</div>
<div class="bm-contact-wide">
<label class="r-label" for="bm-contact-subject">Worum geht es?</label>
<select class="r-input" id="bm-contact-subject" name="subject">
<option value="project">Ein neues Projekt</option>
<option value="design">Design & Gestaltung</option>
<option value="other">Eine andere Frage</option>
</select>
</div>
<div class="bm-contact-wide">
<label class="r-label" for="bm-contact-message">Deine Nachricht *</label>
<textarea class="r-input bm-contact-message" id="bm-contact-message" name="message" required minlength="10" maxlength="2000" aria-describedby="bm-contact-help">
</textarea>
<p class="bm-small bm-muted" id="bm-contact-help">10–2.000 Zeichen. Nur Demo-Inhalte eingeben.</p>
</div>
</div>
<label class="bm-check-label" for="bm-contact-consent">
<input class="r-check" id="bm-contact-consent" type="checkbox" required name="demoConsent">
<span>Ich habe verstanden, dass diese Demo keine Nachricht versendet. *</span>
</label>
<div class="bm-actions">
<button class="r-button r-button-primary" type="submit">Demo lokal prüfen</button>
<button class="r-button" type="reset">Zurücksetzen</button>
</div>
<p class="bm-small bm-muted">* Pflichtfelder. Ohne JavaScript wird ebenfalls nichts versendet.</p>
<p class="bm-small bm-status" data-bm-contact-status role="status">
</p>
</form>
</section>
<script type="module">
import {initMarketingBlocks} from 'https://ui.rittek.de/assets/modules/blocks-marketing.js';
const cleanup = initMarketingBlocks(document.getElementById('bm-contact'));
// Beim Entfernen der Ansicht: cleanup();
</script>
</body>
</html>