RITTEK BLOCKS / Medien & Bühnen
Medien & Bühnen. 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.
Hero-Slider · Drei Perspektiven Hero-Slider · Produktbühne Portfolio · Perspektivenarchiv Stimmenbühne · In deinem Tempo Before / After · Ordnung wird sichtbar Rittek / Medienkollektion 01
Drei Perspektiven. Dein nächster Schritt. Manuell wechseln. Kein Autoplay. Pfeiltasten und Home/End stehen in der Navigation zur Verfügung.
Studio / digitale Arbeitsräume
Eine klare Richtung. Strategie wird greifbar, wenn alle Beteiligten denselben nächsten Schritt sehen. Bringe Ziele, Verantwortlichkeiten und Entscheidungen zusammen.
NORDEigene CSS-Illustration
Studio / digitale Arbeitsräume
Raum für gute Arbeit. Ein Designsystem schafft Orientierung, ohne den Charakter eines Projekts einzuschränken. Ein gemeinsamer Rhythmus für unterschiedliche Inhalte.
RAUMEigene CSS-Illustration
Studio / digitale Arbeitsräume
Bereit für den Alltag. Aus einer Idee wird eine Oberfläche, die sich im echten Arbeitsablauf bewährt. Verständliche Zustände und sorgfältige Details gehören dazu.
FORMEigene CSS-Illustration
← Zurück 1 / 3 Weiter → 1 2 3
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>Hero-Slider · Drei Perspektiven · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-media.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bme-block bme-stack-lg" id="bme-hero-split" data-media-hero aria-labelledby="bme-hero-split-title">
<header class="bme-stack">
<p class="bme-eyebrow">Rittek / Medienkollektion 01</p>
<h2 class="bme-heading" id="bme-hero-split-title" data-media-focus tabindex="-1">Drei Perspektiven. Dein nächster Schritt.</h2>
<p class="bme-small bme-muted">Manuell wechseln. Kein Autoplay. Pfeiltasten und Home/End stehen in der Navigation zur Verfügung.</p>
</header>
<article class="bme-slide" data-media-slide data-media-title="Eine klare Richtung.">
<div class="bme-slide-copy bme-stack">
<p class="bme-eyebrow bme-slide-tag">Studio / digitale Arbeitsräume</p>
<h3 class="bme-title">Eine klare Richtung.</h3>
<p class="bme-muted">Strategie wird greifbar, wenn alle Beteiligten denselben nächsten Schritt sehen. Bringe Ziele, Verantwortlichkeiten und Entscheidungen zusammen.</p>
<div class="bme-actions">
<a class="r-button r-button-primary" href="/docs/">System entdecken</a>
<a class="r-button" href="#bme-hero-split-controls">Ansichten wechseln</a>
</div>
</div>
<div class="bme-art bme-art-editorial" data-media-art aria-hidden="true">
<span>NORD<small>Eigene CSS-Illustration</small>
</span>
</div>
</article>
<article class="bme-slide" data-media-slide data-media-title="Raum für gute Arbeit.">
<div class="bme-slide-copy bme-stack">
<p class="bme-eyebrow bme-slide-tag">Studio / digitale Arbeitsräume</p>
<h3 class="bme-title">Raum für gute Arbeit.</h3>
<p class="bme-muted">Ein Designsystem schafft Orientierung, ohne den Charakter eines Projekts einzuschränken. Ein gemeinsamer Rhythmus für unterschiedliche Inhalte.</p>
<div class="bme-actions">
<a class="r-button r-button-primary" href="/docs/">System entdecken</a>
<a class="r-button" href="#bme-hero-split-controls">Ansichten wechseln</a>
</div>
</div>
<div class="bme-art bme-art-system" data-media-art aria-hidden="true">
<span>RAUM<small>Eigene CSS-Illustration</small>
</span>
</div>
</article>
<article class="bme-slide" data-media-slide data-media-title="Bereit für den Alltag.">
<div class="bme-slide-copy bme-stack">
<p class="bme-eyebrow bme-slide-tag">Studio / digitale Arbeitsräume</p>
<h3 class="bme-title">Bereit für den Alltag.</h3>
<p class="bme-muted">Aus einer Idee wird eine Oberfläche, die sich im echten Arbeitsablauf bewährt. Verständliche Zustände und sorgfältige Details gehören dazu.</p>
<div class="bme-actions">
<a class="r-button r-button-primary" href="/docs/">System entdecken</a>
<a class="r-button" href="#bme-hero-split-controls">Ansichten wechseln</a>
</div>
</div>
<div class="bme-art bme-art-product" data-media-art aria-hidden="true">
<span>FORM<small>Eigene CSS-Illustration</small>
</span>
</div>
</article>
<div id="bme-hero-split-controls" class="bme-controls" data-media-controls hidden>
<button class="r-button" type="button" data-media-prev aria-label="Vorherige Ansicht">← Zurück</button>
<span class="bme-small bme-muted" data-media-index>1 / 3</span>
<button class="r-button" type="button" data-media-next aria-label="Nächste Ansicht">Weiter →</button>
<button class="r-button r-button-sm" type="button" data-media-goto="0" aria-label="Ansicht 1 wählen">1</button>
<button class="r-button r-button-sm" type="button" data-media-goto="1" aria-label="Ansicht 2 wählen">2</button>
<button class="r-button r-button-sm" type="button" data-media-goto="2" aria-label="Ansicht 3 wählen">3</button>
</div>
<p class="bme-status" data-media-status role="status">
</p>
</section>
<script type="module">
import {initMediaBlocks} from 'https://ui.rittek.de/assets/modules/blocks-media.js';
const cleanup = initMediaBlocks(document.getElementById('bme-hero-split'));
// Beim Entfernen: cleanup(); Erneutes Init setzt den Anfangszustand zurück.
// Lokale Abstände: --bme-space; Farben/Schrift über --r-* Tokens.
</script>
</body>
</html>
Vom Überblick ins Detail. Ein großer Produktblick unter dem Text. Diese zentrierte Variante zeigt eine Idee pro Ansicht und setzt die visuelle Arbeitsfläche in den Mittelpunkt.
ORDNUNGEigene CSS-Produktillustration
Inhalte finden ihren Platz. Redaktionelle Bereiche, klare Hierarchien und ein ruhiger Takt. Ein System kann Geschichten erzählen und gleichzeitig den nächsten Schritt verständlich machen.
KONTEXTEigene CSS-Produktillustration
Ein System wächst mit. Der Aufbau bleibt unabhängig vom Farbschema. Ein manuell steuerbarer Produktauftakt ohne externe Bilder oder Bibliotheken.
WEITEREigene CSS-Produktillustration
← Zurück 1 / 3 Weiter → 1 2 3
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>Hero-Slider · Produktbühne · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-media.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bme-block bme-centered bme-stack-lg" id="bme-hero-centered" data-media-hero aria-labelledby="bme-hero-centered-title">
<header class="bme-stack">
<p class="bme-eyebrow">Rittek / Produktbühne</p>
<h2 class="bme-heading" id="bme-hero-centered-title" data-media-focus tabindex="-1">Eine Idee braucht eine klare Bühne.</h2>
<p class="bme-small bme-muted">Drei lokale Ansichten. Ohne JavaScript bleiben alle Inhalte sichtbar.</p>
</header>
<article class="bme-slide" data-media-slide data-media-title="Vom Überblick ins Detail.">
<div class="bme-slide-copy bme-stack">
<h3 class="bme-title">Vom Überblick ins Detail.</h3>
<p class="bme-muted">Ein großer Produktblick unter dem Text. Diese zentrierte Variante zeigt eine Idee pro Ansicht und setzt die visuelle Arbeitsfläche in den Mittelpunkt.</p>
<div class="bme-actions">
<a class="r-button r-button-primary" href="/docs/konfigurator.html">Komponenten entdecken</a>
</div>
</div>
<div class="bme-art bme-art-system" data-media-art aria-hidden="true">
<span>ORDNUNG<small>Eigene CSS-Produktillustration</small>
</span>
</div>
</article>
<article class="bme-slide" data-media-slide data-media-title="Inhalte finden ihren Platz.">
<div class="bme-slide-copy bme-stack">
<h3 class="bme-title">Inhalte finden ihren Platz.</h3>
<p class="bme-muted">Redaktionelle Bereiche, klare Hierarchien und ein ruhiger Takt. Ein System kann Geschichten erzählen und gleichzeitig den nächsten Schritt verständlich machen.</p>
<div class="bme-actions">
<a class="r-button r-button-primary" href="/docs/konfigurator.html">Komponenten entdecken</a>
</div>
</div>
<div class="bme-art bme-art-editorial" data-media-art aria-hidden="true">
<span>KONTEXT<small>Eigene CSS-Produktillustration</small>
</span>
</div>
</article>
<article class="bme-slide" data-media-slide data-media-title="Ein System wächst mit.">
<div class="bme-slide-copy bme-stack">
<h3 class="bme-title">Ein System wächst mit.</h3>
<p class="bme-muted">Der Aufbau bleibt unabhängig vom Farbschema. Ein manuell steuerbarer Produktauftakt ohne externe Bilder oder Bibliotheken.</p>
<div class="bme-actions">
<a class="r-button r-button-primary" href="/docs/konfigurator.html">Komponenten entdecken</a>
</div>
</div>
<div class="bme-art bme-art-product" data-media-art aria-hidden="true">
<span>WEITER<small>Eigene CSS-Produktillustration</small>
</span>
</div>
</article>
<div class="bme-controls" data-media-controls hidden>
<button class="r-button" type="button" data-media-prev aria-label="Vorherige Ansicht">← Zurück</button>
<span class="bme-small bme-muted" data-media-index>1 / 3</span>
<button class="r-button" type="button" data-media-next aria-label="Nächste Ansicht">Weiter →</button>
<button class="r-button r-button-sm" type="button" data-media-goto="0" aria-label="Ansicht 1 wählen">1</button>
<button class="r-button r-button-sm" type="button" data-media-goto="1" aria-label="Ansicht 2 wählen">2</button>
<button class="r-button r-button-sm" type="button" data-media-goto="2" aria-label="Ansicht 3 wählen">3</button>
</div>
<p class="bme-status" data-media-status role="status">
</p>
</section>
<script type="module">
import {initMediaBlocks} from 'https://ui.rittek.de/assets/modules/blocks-media.js';
const cleanup = initMediaBlocks(document.getElementById('bme-hero-centered'));
// Beim Entfernen: cleanup(); Erneutes Init setzt den Anfangszustand zurück.
// Lokale Abstände: --bme-space; Farben/Schrift über --r-* Tokens.
</script>
</body>
</html>
Eigenes Archiv / fiktive Projekte
Andere Aufgaben. Eine klare Haltung. Filtere die Projekte und öffne die Bildbühne. Eigene CSS-Flächen ersetzen externe Bilder.
Alle Architektur Produkt Editorial
6 fiktive Projekte. Ohne JavaScript bleiben alle Beschreibungen sichtbar.
NORDFiktiver Projektentwurf
architektur
Nord / Kulturraum Ein redaktioneller Identitätsentwurf mit großzügiger Typografie und einer klaren räumlichen Ordnung.
Projekt vergrößern ↗
FORMAFiktiver Projektentwurf
produkt
Forma / Workspace Eine Produktoberfläche, die Aufgaben und Entscheidungen auf einem gemeinsamen Arbeitsbereich zusammenführt.
Projekt vergrößern ↗
ATLASFiktiver Projektentwurf
editorial
Atlas / Journal Eine Artikelfamilie mit lesbaren Metadaten und einem ruhigen Lesefluss.
Projekt vergrößern ↗
LINIEFiktiver Projektentwurf
architektur
Linie / Studio Ein strukturiertes Präsentationssystem für Räume, Projekte und die Geschichten dahinter.
Projekt vergrößern ↗
MODULFiktiver Projektentwurf
produkt
Modul / Planer Ein beispielhafter Planungsraum mit konsistenter Hierarchie und klaren Zustandsanzeigen.
Projekt vergrößern ↗
BLICKFiktiver Projektentwurf
editorial
Perspektive / Dossier Ein Inhaltskonzept für unterschiedliche Blickwinkel auf ein gemeinsames Thema.
Projekt vergrößern ↗
Projektansicht Schließen ×
← Zurück Weiter →
Pfeile: vorheriges/nächstes Projekt; Home/End: Anfang/Ende der gefilterten Auswahl; Escape: schließen.
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>Portfolio · Perspektivenarchiv · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-media.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bme-block bme-stack-lg" id="bme-portfolio" data-media-gallery aria-labelledby="bme-portfolio-title">
<header class="bme-stack">
<p class="bme-eyebrow">Eigenes Archiv / fiktive Projekte</p>
<h2 class="bme-title" id="bme-portfolio-title">Andere Aufgaben.<br>Eine klare Haltung.</h2>
<p class="bme-muted">Filtere die Projekte und öffne die Bildbühne. Eigene CSS-Flächen ersetzen externe Bilder.</p>
</header>
<div class="bme-actions bme-filters" role="group" aria-label="Projekte filtern">
<button class="r-button" type="button" data-media-filter="all" aria-pressed="true">Alle</button>
<button class="r-button" type="button" data-media-filter="architektur" aria-pressed="false">Architektur</button>
<button class="r-button" type="button" data-media-filter="produkt" aria-pressed="false">Produkt</button>
<button class="r-button" type="button" data-media-filter="editorial" aria-pressed="false">Editorial</button>
</div>
<p class="bme-status" data-media-status role="status">6 fiktive Projekte. Ohne JavaScript bleiben alle Beschreibungen sichtbar.</p>
<div class="bme-gallery">
<article class="bme-card" data-media-card data-media-category="architektur">
<div class="bme-art bme-art-editorial" data-media-art aria-hidden="true">
<span>NORD<small>Fiktiver Projektentwurf</small>
</span>
</div>
<div class="bme-card-copy">
<p class="bme-eyebrow">architektur</p>
<h3 class="bme-heading">Nord / Kulturraum</h3>
<p class="bme-small bme-muted" data-media-caption>Ein redaktioneller Identitätsentwurf mit großzügiger Typografie und einer klaren räumlichen Ordnung.</p>
<button class="r-button r-button-sm" type="button" data-media-open aria-label="Nord / Kulturraum vergrößern">Projekt vergrößern ↗</button>
</div>
</article>
<article class="bme-card" data-media-card data-media-category="produkt">
<div class="bme-art bme-art-product" data-media-art aria-hidden="true">
<span>FORMA<small>Fiktiver Projektentwurf</small>
</span>
</div>
<div class="bme-card-copy">
<p class="bme-eyebrow">produkt</p>
<h3 class="bme-heading">Forma / Workspace</h3>
<p class="bme-small bme-muted" data-media-caption>Eine Produktoberfläche, die Aufgaben und Entscheidungen auf einem gemeinsamen Arbeitsbereich zusammenführt.</p>
<button class="r-button r-button-sm" type="button" data-media-open aria-label="Forma / Workspace vergrößern">Projekt vergrößern ↗</button>
</div>
</article>
<article class="bme-card" data-media-card data-media-category="editorial">
<div class="bme-art bme-art-editorial" data-media-art aria-hidden="true">
<span>ATLAS<small>Fiktiver Projektentwurf</small>
</span>
</div>
<div class="bme-card-copy">
<p class="bme-eyebrow">editorial</p>
<h3 class="bme-heading">Atlas / Journal</h3>
<p class="bme-small bme-muted" data-media-caption>Eine Artikelfamilie mit lesbaren Metadaten und einem ruhigen Lesefluss.</p>
<button class="r-button r-button-sm" type="button" data-media-open aria-label="Atlas / Journal vergrößern">Projekt vergrößern ↗</button>
</div>
</article>
<article class="bme-card" data-media-card data-media-category="architektur">
<div class="bme-art bme-art-system" data-media-art aria-hidden="true">
<span>LINIE<small>Fiktiver Projektentwurf</small>
</span>
</div>
<div class="bme-card-copy">
<p class="bme-eyebrow">architektur</p>
<h3 class="bme-heading">Linie / Studio</h3>
<p class="bme-small bme-muted" data-media-caption>Ein strukturiertes Präsentationssystem für Räume, Projekte und die Geschichten dahinter.</p>
<button class="r-button r-button-sm" type="button" data-media-open aria-label="Linie / Studio vergrößern">Projekt vergrößern ↗</button>
</div>
</article>
<article class="bme-card" data-media-card data-media-category="produkt">
<div class="bme-art bme-art-system" data-media-art aria-hidden="true">
<span>MODUL<small>Fiktiver Projektentwurf</small>
</span>
</div>
<div class="bme-card-copy">
<p class="bme-eyebrow">produkt</p>
<h3 class="bme-heading">Modul / Planer</h3>
<p class="bme-small bme-muted" data-media-caption>Ein beispielhafter Planungsraum mit konsistenter Hierarchie und klaren Zustandsanzeigen.</p>
<button class="r-button r-button-sm" type="button" data-media-open aria-label="Modul / Planer vergrößern">Projekt vergrößern ↗</button>
</div>
</article>
<article class="bme-card" data-media-card data-media-category="editorial">
<div class="bme-art bme-art-product" data-media-art aria-hidden="true">
<span>BLICK<small>Fiktiver Projektentwurf</small>
</span>
</div>
<div class="bme-card-copy">
<p class="bme-eyebrow">editorial</p>
<h3 class="bme-heading">Perspektive / Dossier</h3>
<p class="bme-small bme-muted" data-media-caption>Ein Inhaltskonzept für unterschiedliche Blickwinkel auf ein gemeinsames Thema.</p>
<button class="r-button r-button-sm" type="button" data-media-open aria-label="Perspektive / Dossier vergrößern">Projekt vergrößern ↗</button>
</div>
</article>
</div>
<dialog class="bme-dialog" id="bme-portfolio-dialog" aria-labelledby="bme-portfolio-dialog-title" aria-describedby="bme-portfolio-dialog-caption">
<div class="bme-stack">
<div class="bme-dialog-top">
<h3 class="bme-heading" id="bme-portfolio-dialog-title" data-media-dialog-title>Projektansicht</h3>
<button class="r-button r-button-sm" type="button" data-media-close autofocus>Schließen ×</button>
</div>
<div data-media-dialog-art>
</div>
<p id="bme-portfolio-dialog-caption" data-media-dialog-caption>
</p>
<div class="bme-actions">
<button class="r-button" type="button" data-media-dialog-prev>← Zurück</button>
<span class="bme-small" data-media-dialog-index role="status">
</span>
<button class="r-button" type="button" data-media-dialog-next>Weiter →</button>
</div>
<p class="bme-small bme-muted">Pfeile: vorheriges/nächstes Projekt; Home/End: Anfang/Ende der gefilterten Auswahl; Escape: schließen.</p>
</div>
</dialog>
</section>
<script type="module">
import {initMediaBlocks} from 'https://ui.rittek.de/assets/modules/blocks-media.js';
const cleanup = initMediaBlocks(document.getElementById('bme-portfolio'));
// Beim Entfernen cleanup(); erneutes Init stellt den Anfangszustand her.
// Lokale Abstände: --bme-space; Farben/Schrift über --r-* Tokens.
</script>
</body>
</html>
Fiktive Stimmen / keine Kundenreferenzen
Gute Arbeit. Andere Perspektiven. Die Bühne steht still, bis du einen Wechsel wählst. Optional startet ein Wechsel alle fünf Sekunden. Kein Autoplay beim Laden.
Bei reduziertem Bewegungswunsch bleibt die Automatik aus. Fokus in anderen Bedienelementen stoppt sie; über der Bühne und in verborgenen Tabs pausiert sie.
„Ein gemeinsamer Blick auf das Projekt hat unsere Gespräche konkreter gemacht. Gute Gestaltung beginnt mit verständlichen Entscheidungen.“
NORDWERK Mara Nord / fiktive Produktleitung
NORDWERK STUDIO / BEISPIEL
„Wir wollten einen klaren Rahmen für unsere Inhalte. Der Unterschied liegt oft in den kleinen, verlässlichen Details.“
ATELIER K Jonas Kern / fiktives Redaktionsteam
ATELIER K STUDIO / BEISPIEL
„Wenn die Oberfläche zurücktritt, wird die eigentliche Arbeit sichtbar. Diese Ruhe schafft Raum für neue Perspektiven.“
FORMRAUM Ari Sommer / fiktive Studiogründung
FORMRAUM STUDIO / BEISPIEL
← Zurück 1 / 3 Weiter → Automatik starten
Pausiert. Aussagen und Marken sind frei erfundene Beispiele.
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>Stimmenbühne · In deinem Tempo · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-media.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bme-block bme-stage bme-stack-lg" id="bme-voices" data-media-stage aria-labelledby="bme-voices-title">
<div class="bme-stage-grid">
<header class="bme-stack">
<p class="bme-eyebrow">Fiktive Stimmen / keine Kundenreferenzen</p>
<h2 class="bme-title" id="bme-voices-title" data-media-focus tabindex="-1">Gute Arbeit.<br>Andere Perspektiven.</h2>
<p class="bme-muted">Die Bühne steht still, bis du einen Wechsel wählst. Optional startet ein Wechsel alle fünf Sekunden. Kein Autoplay beim Laden.</p>
<p class="bme-small bme-muted">Bei reduziertem Bewegungswunsch bleibt die Automatik aus. Fokus in anderen Bedienelementen stoppt sie; über der Bühne und in verborgenen Tabs pausiert sie.</p>
</header>
<div data-media-stage-area>
<figure class="bme-quote" data-media-slide data-media-title="NORDWERK">
<blockquote>
<p>„Ein gemeinsamer Blick auf das Projekt hat unsere Gespräche konkreter gemacht. Gute Gestaltung beginnt mit verständlichen Entscheidungen.“</p>
</blockquote>
<figcaption>
<strong>NORDWERK</strong>
<p class="bme-small bme-muted">Mara Nord / fiktive Produktleitung</p>
</figcaption>
<div class="bme-logos" aria-label="Fiktive Beispielmarken">
<span>NORDWERK</span>
<span>STUDIO / BEISPIEL</span>
</div>
</figure>
<figure class="bme-quote" data-media-slide data-media-title="ATELIER K">
<blockquote>
<p>„Wir wollten einen klaren Rahmen für unsere Inhalte. Der Unterschied liegt oft in den kleinen, verlässlichen Details.“</p>
</blockquote>
<figcaption>
<strong>ATELIER K</strong>
<p class="bme-small bme-muted">Jonas Kern / fiktives Redaktionsteam</p>
</figcaption>
<div class="bme-logos" aria-label="Fiktive Beispielmarken">
<span>ATELIER K</span>
<span>STUDIO / BEISPIEL</span>
</div>
</figure>
<figure class="bme-quote" data-media-slide data-media-title="FORMRAUM">
<blockquote>
<p>„Wenn die Oberfläche zurücktritt, wird die eigentliche Arbeit sichtbar. Diese Ruhe schafft Raum für neue Perspektiven.“</p>
</blockquote>
<figcaption>
<strong>FORMRAUM</strong>
<p class="bme-small bme-muted">Ari Sommer / fiktive Studiogründung</p>
</figcaption>
<div class="bme-logos" aria-label="Fiktive Beispielmarken">
<span>FORMRAUM</span>
<span>STUDIO / BEISPIEL</span>
</div>
</figure>
</div>
</div>
<div class="bme-controls" data-media-controls hidden>
<button class="r-button" type="button" data-media-prev>← Zurück</button>
<span class="bme-small bme-muted" data-media-index>1 / 3</span>
<button class="r-button" type="button" data-media-next>Weiter →</button>
<button class="r-button" type="button" data-media-play aria-pressed="false">Automatik starten</button>
</div>
<p class="bme-status" data-media-status role="status">Pausiert. Aussagen und Marken sind frei erfundene Beispiele.</p>
</section>
<script type="module">
import {initMediaBlocks} from 'https://ui.rittek.de/assets/modules/blocks-media.js';
const cleanup = initMediaBlocks(document.getElementById('bme-voices'));
// Beim Entfernen cleanup(); erneutes Init stellt den Anfangszustand her.
// Lokale Abstände: --bme-space; Farben/Schrift über --r-* Tokens.
</script>
</body>
</html>
Visueller Vergleich / eigene Entwürfe
Von der Fläche zum klaren System. Zwei schematische Gestaltungsansätze, kein gemessenes Vorher-Nachher-Ergebnis. Der Regler bestimmt den sichtbaren Nachher-Anteil.
SKIZZEFreie Flächen / Vorher
Vorher / Skizze SYSTEMKlare Ordnung / Nachher
Nachher / System Ohne JavaScript stehen die beschrifteten Entwürfe neben- beziehungsweise untereinander. Lokale Abstände: --bme-space.
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>Before / After · Ordnung wird sichtbar · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-media.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bme-block bme-comparison bme-stack-lg" id="bme-comparison" data-media-comparison aria-labelledby="bme-comparison-title">
<header class="bme-stack">
<p class="bme-eyebrow">Visueller Vergleich / eigene Entwürfe</p>
<h2 class="bme-title" id="bme-comparison-title" data-media-focus tabindex="-1">Von der Fläche<br>zum klaren System.</h2>
<p class="bme-muted">Zwei schematische Gestaltungsansätze, kein gemessenes Vorher-Nachher-Ergebnis. Der Regler bestimmt den sichtbaren Nachher-Anteil.</p>
</header>
<div class="bme-comparison-surface" data-media-compare-surface>
<div class="bme-comparison-before">
<div class="bme-art bme-art-editorial" data-media-art aria-hidden="true">
<span>SKIZZE<small>Freie Flächen / Vorher</small>
</span>
</div>
<span class="bme-comparison-label">Vorher / Skizze</span>
</div>
<div class="bme-comparison-after">
<div class="bme-art bme-art-system" data-media-art aria-hidden="true">
<span>SYSTEM<small>Klare Ordnung / Nachher</small>
</span>
</div>
<span class="bme-comparison-label">Nachher / System</span>
</div>
</div>
<div class="bme-compare-controls bme-stack" data-media-compare-control hidden>
<label class="r-label" for="bme-comparison-range">Sichtbarer Nachher-Anteil</label>
<input class="bme-range" id="bme-comparison-range" type="range" min="0" max="100" step="1" value="50" aria-describedby="bme-comparison-help">
<output for="bme-comparison-range">50 % Nachher</output>
<p class="bme-small bme-muted" id="bme-comparison-help">Pfeiltasten ändern um 1 Prozentpunkt; Home zeigt Vorher, End Nachher vollständig. Keine nachlaufende Animation.</p>
</div>
<p class="bme-small bme-muted">Ohne JavaScript stehen die beschrifteten Entwürfe neben- beziehungsweise untereinander. Lokale Abstände: --bme-space.</p>
</section>
<script type="module">
import {initMediaBlocks} from 'https://ui.rittek.de/assets/modules/blocks-media.js';
const cleanup = initMediaBlocks(document.getElementById('bme-comparison'));
// Beim Entfernen cleanup(); erneutes Init stellt den Anfangszustand her.
// Lokale Abstände: --bme-space; Farben/Schrift über --r-* Tokens.
</script>
</body>
</html>