Sivuston rakenne

HSL.fi-verkkopalvelu on HSL-brändin viestinnällinen keskipiste, johon asiakkaat palaavat yhä uudelleen. HSL.fi on responsiivinen, joten käyttökokemus on mainio myös mobiililaitteilla.

Palvelun etusivu on ylivoimaisesti yleisin laskeutumissivu. Se nostaa esiin reittihaun, liikennetiedotteet, uutiset ja poikkeusinfot sekä ajankohtaiset alasivut.

HSL:n markkinointikampanjat ovat näkyvästi esillä myös verkkopalvelussa. Tutustu kampanjasivustoon ja -bannereihin: https://www.hsl.fi/tyyliopas/verkko-ja-mobiili.

Verkkopalvelun etusivu ja jokaisen päänavigaatiokohdan etusivu eroavat ulkoasullisesti hieman muusta sivustosta. Ne kokoavat käyttäjälle aihealueeseen liittyviä ajankohtaisia alasivuja. Sivuston sisältösivut sen sijaan ovat samankaltaisia, ja ne hyödyntävät muun muassa samaa header-osaa, typografiaa ja graafisia elementtejä.

Päivitämme tämän sivun sisältöä.

Header ja footer

HSL.fi-sivustolla käytetään samaa headeria (yläosa) ja footeria (alaosa) läpi sivuston. Poikkeuksena tästä on palvelun etusivu, jossa headeriin voi liittää kampanjabannerin.

Lue lisää kampanjabannerin käytöstä: https://www.hsl.fi/tyyliopas/hslfi-etusivun-kampanjabanneri.

Typografia

Normaali leipäteksti

Sivut noudattavat samaa typografiaa läpi sivuston.

Medium Leipäteksti
Large teksti
Valikot, painikkeet ja pienimmät otsikot
Pieni otsikko
Medium otsikko
Iso otsikko

Sisältölaatikot

Sisältölaatikot

Vakiolaatikon kulman pyöristys on 15 pikseliä.

Ympyrän säde (15 pikseliä) määrittää tekstin etäisyyden umpilaatikon reunasta.

Laatikkojen väliin jää 10 pikseliä.

Painikkeet

Buttons

XS-button:
font-size: 16px
line-height: 1.25em (20px)
height: 30px
border-radius: 15px

S-button:
font-size: 20px
height: 40px
border-radius: 20px

M-button:
font-size: 30px
height: 60px
border-radius: 30px

L-button:
font-size: 40px
height: 80px
border-radius: 40px

button hover: 30% vaaleampi
button mousedown: 20% tummempi

Valikko

Valikko

Valikon asetukset:

border-radius: 15px, 15px, 0, 0

Valikko kahdessa rivissä

Jos valikko menee kaksiriviseksi, aktiivinen sivu on aina alimmassa rivissä.

Dropdown

Dropdown

Monivalinta

Monivalinta
Takaisin ylös