Zum Hauptinhalt springen

Komponentenbibliothek

Die Bausteine von rectify

Eine Arbeitsansicht der wiederverwendbaren Komponenten, Varianten und Layoutmuster, aus denen die Website entsteht.

@rectify/ui und @rectify/layouts

Ein System, viele Einsatzorte.

Nutze diese Seite, um bestehende Bausteine vor dem Erstellen neuer Varianten zu vergleichen.

Aktionen

Buttons

Primäre, sekundäre und navigierende Aktionen für klare nächste Schritte.

ButtonPrimary

ButtonSecondary

ButtonNav

Eingabe

Formulare und Auswahl

Eingaben und Auswahloptionen mit dem charakteristischen, weichen rectify Radius.

Input

QuizOption

Information

Content Cards

Bausteine für Vorteile, Kennzahlen und kompakte Inhalte in flexiblen Rastern.

BGMCard

Messbar im Alltag

Richte Informationen so aus, dass sie schnell verständlich und gut vergleichbar bleiben.

DataButton

18
präzise Messpunkte

BentoCard

Bento Card

Eine freie Kartenfläche für unterschiedliche Inhalte und Hierarchien.

Interaktion

Aufklappbare Inhalte

Akkordeons halten längere Erklärungen im Fluss, ohne die Seite zu überladen.

RectifyAccordion

StepAccordion

Schrittweise Informationen

Die StepAccordion-Variante ergänzt den gleichen Interaktionsansatz um nummerierte Prozessschritte.

1Erster Schritt

Komposition

Layoutbausteine

Wiederkehrende Muster für Vertrauen, modulare Inhalte und fokussierte Abschlussaktionen.

USPBar

Klar strukturiert
Direktes Feedback
Wissenschaftlich fundiert
Einfach erweiterbar

BentoGrid

Flexible Inhaltshierarchie

EndCTABanner

Fokussierte Abschlussaktion

Komponierte Bereiche

Höherwertige Komponenten

Fertige Bereiche kombinieren Interaktion, Inhalte und responsive Layouts zu wiederverwendbaren Seitenelementen.

Carousel / ImageAccordion

Interaktive Galerie

Bildbereiche mit Fokuswechsel, Text und optionalen Handlungsaufforderungen.

Haltung wahrnehmen

Haltung wahrnehmen

Ein visueller Einstieg in einen komplexen Inhalt.

Feedback verstehen
Fortschritt sehen

FAQWithImage

FAQ-Bereiche kombinieren aufklappbare Antworten mit einem unterstützenden Bild und einer Kontaktaktion.

Fragen, klar beantwortet

Wie bleibt eine FAQ übersichtlich?

Die Frage steht im Mittelpunkt, während die Antwort erst bei Bedarf sichtbar wird.

Wann passt ein Bild dazu?

Wenn es die Kontaktmöglichkeit oder die inhaltliche Orientierung unterstützt.

Noch eine Frage?

Noch eine Frage?

TestimonialsSection

Ein horizontaler Bereich für echte Stimmen, inklusive Navigation und optionalen Videostatements.

Erfahrungen aus dem Alltag

DataButton / StatisticStatementSlider

Fact Pills

Markante Kennzahlen für Studien, Produktvorteile oder messbare Fortschritte.

18
präzise Messpunkte
50 Hz
Messfrequenz
Genauigkeit

StatisticStatementSlider

Eine kompakte Alternative für genau drei Kennzahlen, die automatisch oder direkt über die Indikatoren wechseln.

18

präzise Messpunkte

EndCTABanner

Ein Abschlussbereich bündelt eine Botschaft und eine eindeutige nächste Aktion.

Bereit für den nächsten Schritt?

Jetzt starten