RITTEK / BLOCK COLLECTION 03
Große Bausteine.
Ein gemeinsames System.
62 eigenständige Layout- und Funktionsblöcke. Suche deinen Einstieg, probiere ihn aus und übernimm den vollständigen HTML-Code. Alle 14 Farbwelten, Hell/Dunkel und die unabhängigen Einstellungen für Kompaktheit und Schrift bleiben verfügbar.
62 Blöcke
Split Hero · Klarer Kurs
Geschäftlicher Einstieg mit eigenem CSS-Dashboard, Leistungsversprechen und klarer Handlungsführung.
02 / MarketingBento Features · Ein System
Asymmetrisches Funktionsraster mit fünf inhaltlich ausgearbeiteten Bausteinen und lesbaren Themenchips.
03 / MarketingPreise · Transparent planen
Drei ausgearbeitete Tarife, echte Monat/Jahr-Umschaltung und lokale Paketauswahl ohne Bestellvorgang.
04 / MarketingFAQ · Gute Antworten
Native Details-Elemente mit sechs vollständigen Antworten, ohne JavaScript und mit Mehrfachöffnung.
05 / MarketingTeam · Menschen mit Haltung
Drei Teamprofile mit Initialen, Rollen, ausführlichem Fokus und zugänglicher Darstellung ohne Bildabhängigkeit.
06 / MarketingKontakt · Das nächste Gespräch
Vollständiges lokal validiertes Formular mit Pflichtfeldern, Zustimmungsfeld und klar abgegrenztem Demo-Erfolg.
07 / Business & AnwendungKPI- und Trendübersicht
Ruhige Business-Kennzahlen mit interaktivem Zeitraumwechsel und ergänzendem, dekorativem Balkendiagramm. Alle Werte sind fiktiv.
08 / Business & AnwendungAktivitätsfeed mit Lesestatus
Alle oder ungelesene Aktivitäten anzeigen und einzeln als gelesen markieren. Der Zustand bleibt nur in dieser Vorschau.
09 / Business & AnwendungAufgabenboard mit Statuswechsel
Aufgaben über native Selects verschieben und die Statussummen sofort sehen. Funktioniert ohne Drag-and-drop mit Tastatur, Maus und Touch.
10 / Business & AnwendungIntegrationseinstellungen
Native Schalter für Beispielintegrationen mit lokalem Übernehmen und Rücksetzen. Kein Server, kein Browser-Speicher, keine echten Verbindungen.
11 / CommerceProduktkollektion mit Suche
Sechs gestaltete Produktkarten mit kombinierter Namenssuche und Kategorieauswahl, echtem Leerzustand und nativen Material-Details. Keine externen Bilder.
12 / CommerceProduktdetail als Quick View
Ein nativer modaler Dialog mit Fokusbegrenzung, Escape, ausdrücklichem Schließen, Variantenwahl, validierter Menge und lokaler Auswahlbestätigung.
13 / CommerceLokaler Warenkorb mit Mengenänderung
Drei Beispielpositionen, direkte Mengenfelder, Plus/Minus, Entfernen und Cent-genaue Artikelsumme. Mit Mengenvalidierung, leerem Zustand und Fokusführung beim Entfernen; bewusst ohne Kasse.
14 / CommerceBewertungsübersicht mit Sternefilter
Vier ausdrücklich fiktive Bewertungen, nachvollziehbarer Gesamtdurchschnitt und Verteilung sowie exakter Sternefilter mit Leerzustand. Keine erfundenen Verifikationsabzeichen.
15 / Kommunikation & PräferenzenNewsletter · Ein guter Gedanke
Inline-Anmeldung mit nativer E-Mail-Validierung und ehrlicher lokaler Demo-Bestätigung ohne Versand.
16 / Kommunikation & PräferenzenAnkündigung · Zum richtigen Zeitpunkt
Schließbares Informationsbanner mit sicherem Fokuswechsel und jederzeit erreichbarer Wiederanzeigen-Aktion.
17 / Kommunikation & PräferenzenPräferenzen · Du entscheidest
Nativer Einstellungsdialog mit drei echten Auswahlaktionen und ausschließlich flüchtigem Demo-Zustand.
18 / Kommunikation & PräferenzenStimmen · Perspektiven wechseln
Drei fiktive ausführliche Referenzstimmen mit manueller zyklischer Navigation und nachvollziehbarem Index.
19 / DatenverwaltungLokale Bestandsverwaltung
Anlegen, Bearbeiten, Details und bestätigtes Löschen mit Undo. Native Dialoge, Suche und aufsteigende Sortierung.
20 / DatenverwaltungFacettierte Suche im Drawer
Seitlicher nativer Dialog mit Kategorien, Status und validiertem Preisbereich. Anwenden aktualisiert lokale Ergebniskarten.
21 / DatenverwaltungAuswahl und CSV-Export
Zeilen auswählen, sichtbare Auswahl gesammelt setzen und ausschließlich ausgewählte Artikel herunterladen.
22 / Bestellungen & CheckoutBestellübersicht mit Details
Vier fiktive Bestellungen mit kombinierter Produkt-/Nummernsuche, Statusfilter, nativen Positionsdetails und zugänglichem Detaildialog inklusive Cent-genauer Summen.
23 / Bestellungen & CheckoutSendungsverfolgung mit Beispielstatus
Drei fiktive Bestellungen und drei manuell wählbare Statusvarianten. Semantische Timeline mit aktuellem Schritt, festen Beispiel-Zeitstempeln und ausdrücklich ohne Live-Tracking.
24 / Bestellungen & CheckoutMehrstufiger Demo-Checkout
Fiktive Adresse mit nativer Pflichtfeldprüfung, drei Versandbeispiele mit Cent-Summen, pruefbare Zusammenfassung und Vor/Zurück-Navigation. Abschluss beendet nur die Demo; keine Bestellung oder Zahlung.
25 / Navigation & ArbeitsflächenResponsiver Studio-Header
Primärnavigation mit sichtbaren Desktoplinks und mobilem Disclosure. Escape, Außenklick, Fokuswechsel und echte Abschnittsziele; ohne JavaScript bleiben alle Links sichtbar.
26 / Navigation & ArbeitsflächenGruppiertes Megamenü
Zwei gegenseitig ausschließende Disclosure-Panels mit echten Links, Kontextspalte und mobiler Stapelung. Normale Linksemantik; kein vorgetäuschtes ARIA-Menü.
27 / Navigation & ArbeitsflächenSidebar und mobiler Workspace-Drawer
Eine Navigation mit nativen Unterabschnitten wechselt am Breakpoint vom Desktop-Dock in einen modalen Drawer. Escape, Außenklick auf Backdrop, Fokus und aktuelle Abschnittswahl sind funktional.
28 / Navigation & ArbeitsflächenKontomenü mit echten lokalen Aktionen
ARIA-Aktionsmenü mit Tastaturnavigation, Profilvorschau und einem wirkenden lokalen Benachrichtigungsschalter. Keine angebliche Anmeldung, Abmeldung oder Kontosynchronisation.
29 / Navigation & ArbeitsflächenAnsichtsmenü für Karten und Listen
Werkzeugmenü mit exklusiver ARIA-Radioauswahl: dieselben Datensätze wechseln tatsächlich zwischen Karten- und Listenlayout. Auswahl und Fokus bleiben nachvollziehbar.
30 / Formulare & AuswahlEin Plan, der zu dir passt.
Native Tarifkarten und Segmentwahl mit nachvollziehbarer Jahreskalkulation.
31 / Formulare & AuswahlEin Spielraum mit klaren Grenzen.
Plätze und Speicher kombinieren. Direkte Eingabe und Schritttasten folgen denselben Regeln.
32 / Formulare & AuswahlEin Kontakt. Oder ein kleines Team.
Zeilen ergänzen, gezielt entfernen und gemeinsam lokal prüfen.
33 / Formulare & AuswahlNur die Angaben, die es braucht.
Kontaktart steuert erforderliche Felder. Änderungen bleiben sichtbar und sind verwerfbar.
34 / Formulare & AuswahlDein Eindruck zählt.
Eine eindeutig beschriftete Skala statt rein visueller Sterne.
35 / Medien & BühnenHero-Slider · Drei Perspektiven
Manuelle Split-Hero-Serie mit eigenen CSS-Illustrationen, Direktwahl und Tastaturnavigation.
36 / Medien & BühnenHero-Slider · Produktbühne
Zentrierter Einstieg mit breiter Illustration unter dem Inhalt; eigene Struktur statt Farbvariante.
37 / Medien & BühnenPortfolio · Perspektivenarchiv
Sechs eigene Projektillustrationen, Kategorienfilter und native Dialog-Lightbox mit Navigation durch gefilterte Ergebnisse.
38 / Medien & BühnenStimmenbühne · In deinem Tempo
Fiktive Referenzstimmen und eigene Wortmarken; standardmäßig pausiert und nur nach ausdrücklichem Start automatisch wechselnd.
39 / Medien & BühnenBefore / After · Ordnung wird sichtbar
Nativer Vergleichsregler über zwei eigenen Illustrationen und statische Alternative ohne JavaScript.
40 / Panels & ZuständeProjekttabs · Horizontal
Drei zugeordnete Panels, Pfeiltasten, Home/End und logisch gespiegelte horizontale Steuerung. Ohne JavaScript bleiben alle Inhalte zugänglich.
41 / Panels & ZuständeProjekttabs · Vertikal
Drei zugeordnete Panels, Pfeiltasten, Home/End und logisch gespiegelte horizontale Steuerung. Ohne JavaScript bleiben alle Inhalte zugänglich.
42 / Panels & ZuständeAntworten · Exklusives Accordion
Native Details mit beliebig langen Antworten. Mit Modul bleibt nur ein Abschnitt geöffnet; ohne Modul ist jeder Abschnitt einzeln bedienbar.
43 / Panels & ZuständeVerzeichnis · Suche und Pagination
Lokale Suche und gekürzte Seitennavigation mit Anfang/Ende und aktuellem Zustand. Ein Suchwechsel beginnt auf Seite eins.
44 / Panels & ZuständeAnsichtszustände · Leer, Fehler und Erfolg
Vier bewusst auswählbare Zustände. Die Ladeansicht simuliert keinen Netzwerkfortschritt; Wiederholen stellt nur die lokale Vorschau um.
45 / Animation & BewegungAnimationslabor · Sechs Einstiege
Sechs endliche Effekte mit Start, Pause, Fortsetzen, Zurücksetzen, Dauer und Staffelung. Systemseitige Bewegungsreduktion bleibt maßgeblich.
46 / Animation & BewegungMikrofeedback · Drücken, Schalten, Prüfen
Native Steuerungen mit optionalem Druck-, Knauf- und Häkchenfeedback. Auswahl und Beschriftung funktionieren auch ohne Bewegung.
47 / Animation & BewegungDatenbewegung · Vergleich und Reihenfolge
Fiktive Wochenwerte wechseln gemeinsam in Grafik und Text. Karten werden im Dokument tatsächlich umgeordnet; Bewegung ist optional.
48 / Zugang & EinrichtungKompakte Anmeldekarte
Lokale Eingabeprüfung mit nativer E-Mail-Validierung, Passwortanzeige und Reset. Kein Login, keine Sitzungsverwaltung und keine Übertragung.
49 / Zugang & EinrichtungRegistrierung mit Kontextspalte
Responsives Split-Layout mit Anzeigename, fiktiver E-Mail, Passwortbestätigung und ungewählter Pflichtbestätigung für die Demo. Erstellt kein Konto.
50 / Zugang & EinrichtungWiederherstellung ohne Versandbehauptung
Eigenständige Recovery-Oberfläche mit neutralem Folgezustand, nativer Adressprüfung und Reset. Keine Aussage über ein vorhandenes Konto.
51 / Zugang & EinrichtungFiktiver Code mit Wiederholen
Ein logisches Codefeld mit Einfügen, Format- und Vergleichsfehlern. Wiederholen wechselt den sichtbaren lokalen Code; keinerlei Identitätsprüfung oder Versand.
52 / Zugang & EinrichtungSetup-Wizard mit optionaler Ansichtswahl
Drei klar getrennte Schritte mit nativer Validierung, Zurück, explizitem Ueberspringen, sicherer Zusammenfassung und lokalem Abschluss. Keine Workspaceanlage.
53 / Zugang & EinrichtungOrganisationszugang in zwei Schritten
Organisation und fiktive Kennung werden getrennt erfasst. Zurück, Fehlerfokus, Zusammenfassung und Neustart zeigen einen anderen Zugangspfad ohne vorgetäuschtes SSO.
54 / Team & ArbeitsabläufeEin Board, das mitarbeitet.
Aufgaben in drei echten Statusspalten. Verschieben per nativer Auswahl, ohne Drag-Zwang.
55 / Team & ArbeitsabläufeGespräche im richtigen Kontext.
Threads finden, Lesestatus ändern und Entwürfe pro Gespräch behalten. Alles bleibt lokal.
56 / Team & ArbeitsabläufeEin Profil mit klarem Stand.
Vorschau und Formular nebeneinander, mit Übernehmen, Verwerfen und sichtbaren Änderungen.
57 / Team & ArbeitsabläufeEin Tag mit Raum dazwischen.
Termine anlegen, bearbeiten, löschen und zurückholen. Die Uhrzeiten werden wirklich geprüft.
58 / Inhalte & RedaktionJournal · Gedanken in Ordnung
Sechs eigene redaktionelle Karten mit kombinierbarer Volltextsuche und nativer Kategorienauswahl; ganze Kurzbeiträge über native Details.
59 / Inhalte & RedaktionLeseraum · Ein klarer Rahmen
Semantischer Artikel mit eigener Kapitelstruktur, nativen Ankerzielen und optionalem scrollabhängigem Lesefortschritt.
60 / Inhalte & RedaktionUmfrage · Eine Frage, klare Zahlen
Lokale Themenwahl mit ausdrücklich fiktivem Ausgangsstand, exakt auf 100 Prozent gerundeten Ergebnissen und vollständigem Reset.
61 / Inhalte & RedaktionKarriere · Zusammen besser
Filterbares Verzeichnis mit vier fiktiven Rollen, Fachbereichen und nativen Stellendetails; ohne erfundenen Bewerbungsprozess.
62 / Inhalte & RedaktionKontakt & FAQ · Erst verstehen
Native Hilfefragen neben einer kompakten Projektanfrage; konkrete Anfragefelder statt Kopie des allgemeinen Kontaktblocks.
Keine passenden Blöcke. Suche oder Bereich ändern.
Die Sammlung wächst in Paketen.
Die Sammlung umfasst Marketing, Business, Commerce, Kommunikation, Datenverwaltung, Bestellungen sowie Navigation, Formulare, Medien, Panels, Bewegung, Zugangsoberflächen, Redaktion und Arbeitsabläufe. Erweiterte Tabellen und Admin-Layouts findest du ebenfalls in der Dokumentation. Navigation, Zugangsoberflächen, Redaktion und Arbeitsabläufe sind als eigene Pakete verfügbar. Weitere Varianten und Funktionen folgen schrittweise.
Untersuchte Referenzen: FlyonUI Blocks und Flowbite Blocks. Erfasste Kategorien und Ausbauplan. Weitere ausgewertete Referenzen: Preline, Pagedone, Meraki UI und HyperUI. Kategorien und öffentlich zugängliche Vorschauen dienten der Funktionsanalyse. Rittek verwendet eigene Implementierungen, Texte und Illustrationen; geschützter Premium-Quellcode wurde nicht übernommen.