Die Punkte HTML-Vorlage

Ein fertiger dreistufiger Abschnitt für statische HTML-Seiteninhalte

Die zentrierte Überschrift und der begleitende Absatz verdeutlichen den Zweck des Abschnitts, noch bevor die Details des Prozesses beginnen. Darunter bieten drei gleichmäßig verteilte Karten separate Inhaltsbereiche für Schritt 1, Schritt 2 und Schritt 3. Jede Karte weist denselben inneren Aufbau auf – Symbol, Label in Großbuchstaben und beschreibender Text –, sodass der Abschnitt zusammenhängende Phasen abbilden kann, ohne dass die umgebende Seite die grundlegende Prozessstruktur vorgeben muss.

Die kreisförmigen Pfeile stellen eine sichtbare Beziehung zwischen den Karten her. Sie zeigen, dass die Phasen zu einer geordneten Abfolge gehören, während sich die einzelnen Schritte durch die hellgrauen Flächen vom weißen Hintergrund abheben. In einer statischen HTML-Umgebung eignet sich der Block dadurch hervorragend als vorbereiteter Bereich für „So funktioniert es“ innerhalb einer umfangreicheren Seite oder Website. Die umgebende Implementierung kann Navigation, zusätzliche Abschnitte sowie übergeordneten Kontext bereitstellen, während dieser Block die eigentliche Prozesserklärung übernimmt.

Da die Interaktion statisch ist, vermittelt der Abschnitt Informationen über Abstände, eine wiederkehrende Kartenstruktur, Symbole, Labels und Richtungsgrafiken statt über Bedienelemente oder wechselnde Zustände. Sein vorgefertigtes Layout lässt sich in eine statische Seite einfügen und anschließend mit projekteigenen Texten, Symbolen, Farben und Maßen anpassen, ohne die grundlegende dreistufige Beziehung zu verändern.