Palstat ja sivupohjat

Käyttöliittymien rakenne perustuu Kela Design Systemissä 12-palstaiseen malliin, jonka pohjalta layout ja palstoitus voidaan toteuttaa joustavasti ja käyttöliittymäkohtaisesti.

Palstat

Sivun sisältöalueen layout voi perustua esimerkiksi kahteen tasaleveään palstaan (1/2 + 1/2) tai esimerkiksi leveän ja kapean alueen yhdistelmään (3/4 + 1/4).

Palstojen leveys määrittyy dynaamisesti sisältöalueen leveyden mukaan. Palstavälit (gutter/margin) noudattavat sen sijaan kiinteitä vakioarvoja. Palstojen väliin jää kaikilla näyttöleveyksillä 32 px tyhjää tilaa.

Esimerkkejä responsiivisen palstoituksen toteutuksesta: Container-, Row- ja Column-komponentit.

Sivurakenteen toteutus palstoilla. — Sivurakenteen voi sommitella joustavasti palstoja yhdistelemällä. Sisältöalueen layoutin voi toteuttaa esimerkiksi 9 palstan (3/4) ja 4 palstan (1/4) jaolla.

Esimerkki palstajoista. — Esimerkki palstajaoista täysleveällä sisältöalueella. Rakenne perustuu kaikilla näyttöleveyksillä 12-palstaiseen malliin.

Esimerkki kaksisarakkeisesta lomakekentästä. — Joissakin tapauksissa (esimerkiksi sisäisissä järjestelmissä) lomakekentän osat voi ryhmitellä kahteen sarakkeeseen. Palstoista muodostuvien sarakkeiden ei tarvitse olla keskenään yhtä leveitä.

Palstojen leveys eri näyttökokoluokilla. — Palstojen leveys vaihtelee näyttökoon mukaan, mutta palstaväli pysyy samana. Myös pienten näyttökokojen (SM, XS) taustalla on 12-osainen palstoitus, vaikka layout toteutuu yleensä 1- tai 2-palstaisena.