Zum Inhalt
r/ rittek uiDOCS

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.

Medien & Bühnen

Hero-Slider · Drei Perspektiven

Manuelle Split-Hero-Serie mit eigenen CSS-Illustrationen, Direktwahl und Tastaturnavigation.

Vollständiges HTML herunterladen ↧

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.

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.

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.

HTML · inklusive Stylesheets und Modul-Einbindung
<!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>

Medien & Bühnen

Hero-Slider · Produktbühne

Zentrierter Einstieg mit breiter Illustration unter dem Inhalt; eigene Struktur statt Farbvariante.

Vollständiges HTML herunterladen ↧

Rittek / Produktbühne

Eine Idee braucht eine klare Bühne.

Drei lokale Ansichten. Ohne JavaScript bleiben alle Inhalte sichtbar.

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.

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.

Ein System wächst mit.

Der Aufbau bleibt unabhängig vom Farbschema. Ein manuell steuerbarer Produktauftakt ohne externe Bilder oder Bibliotheken.

HTML · inklusive Stylesheets und Modul-Einbindung
<!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>

Medien & Bühnen

Portfolio · Perspektivenarchiv

Sechs eigene Projektillustrationen, Kategorienfilter und native Dialog-Lightbox mit Navigation durch gefilterte Ergebnisse.

Vollständiges HTML herunterladen ↧

Eigenes Archiv / fiktive Projekte

Andere Aufgaben.
Eine klare Haltung.

Filtere die Projekte und öffne die Bildbühne. Eigene CSS-Flächen ersetzen externe Bilder.

6 fiktive Projekte. Ohne JavaScript bleiben alle Beschreibungen sichtbar.

Projektansicht

Pfeile: vorheriges/nächstes Projekt; Home/End: Anfang/Ende der gefilterten Auswahl; Escape: schließen.

HTML · inklusive Stylesheets und Modul-Einbindung
<!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>

Medien & Bühnen

Stimmenbühne · In deinem Tempo

Fiktive Referenzstimmen und eigene Wortmarken; standardmäßig pausiert und nur nach ausdrücklichem Start automatisch wechselnd.

Vollständiges HTML herunterladen ↧

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

NORDWERKSTUDIO / 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 KSTUDIO / 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

FORMRAUMSTUDIO / BEISPIEL

Pausiert. Aussagen und Marken sind frei erfundene Beispiele.

HTML · inklusive Stylesheets und Modul-Einbindung
<!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>

Medien & Bühnen

Before / After · Ordnung wird sichtbar

Nativer Vergleichsregler über zwei eigenen Illustrationen und statische Alternative ohne JavaScript.

Vollständiges HTML herunterladen ↧

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.

Vorher / Skizze
Nachher / System

Ohne JavaScript stehen die beschrifteten Entwürfe neben- beziehungsweise untereinander. Lokale Abstände: --bme-space.

HTML · inklusive Stylesheets und Modul-Einbindung
<!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>