A pontok HTML Sablon

Kész háromlépéses szekció statikus HTML-oldaltartalmakhoz

A középre zárt címsor és a kísérő bekezdés már a folyamat részleteinek kibontása előtt megalapozza a szekció célját. Alattuk három, egymástól egyenlő távolságra elhelyezett kártya biztosít külön tartalmi felületet az 1. lépés, a 2. lépés és a 3. lépés számára. Mindegyik kártya azonos belső felépítést követ – ikon, csupa nagybetűs címke és leíró szöveg –, így a szekció anélkül mutatja be az egymáshoz kapcsolódó fázisokat, hogy a befoglaló oldalnak kellene megadnia az alapvető folyamatelrendezést.

A köríves nyilak jól látható kapcsolatot teremtenek a kártyák között. Egyértelművé teszik, hogy a fázisok rendezett sorrendet alkotnak, a világosszürke felületek pedig elkülönítik az egyes lépéseket a fehér háttértől. Statikus HTML-környezetben ez a blokk kiválóan használható egy kész „hogyan működik” részként egy átfogóbb oldalon vagy webhelyen belül. A környező megvalósítás biztosíthatja a navigációt, a további szekciókat és az oldalszintű kontextust, míg maga a blokk a folyamat tényleges magyarázatát hordozza.

Mivel az interakció statikus, a szekció vezérlőelemek vagy változó állapotok helyett térközökkel, ismétlődő kártyastruktúrával, ikonokkal, címkékkel és irányjelző grafikákkal kommunikál. Kész elrendezése beilleszthető egy statikus oldalba, majd a projekt saját szövegeivel, ikonjaival, színeivel és méreteivel szabható testre anélkül, hogy megváltozna az alapvető háromlépéses összefüggés.