Jämförda versioner

Nyckel

  • Dessa rader lades till.
  • Denna rad togs bort.
  • Formateringen ändrades.
Info

Komponenten är responsiv. Ändra bredd på webbläsarfönstret för att se komponenten i dess olika lägen. OBS! Bred skärm samt omladdning av sidan kan behövas för att se desktopläget. Se gärna Sketchbiblioteket för referens.


Innehållsförteckning

Exempel

Inkludera sida
Navigering: På sidan
Navigering: På sidan

Designspecifikation

På sidan-navigeringen listar utvalda länkar till olika kapitel i artikeln som besökaren befinner sig i. Syftet är att skapa en bra översikt av innehållet samt underlätta navigering på långa artikelsidor med flera rubriker.

Desktop

På sidan-navigeringen är sticky och följer med även i långa artiklar. Den placeras under Lokalnavigeringen om sådan finns.

På sidan-navigeringen har blå färgskala och ligger i en blå ram med rundade hörn för att skilja den från lokalnavigeringen.

  • Blå rubriker på vit bakgrund, med blå streck mellan.

  • Hover och aktiv sida visas med vit pil i blå cirkel till vänster om rubriken.

  • Hörnradie 10 px.

Mobil och tablet

På mobil och tablet fungerar På sidan navigeringen lite annorlunda. Där blir istället kapitlen hopfällda i utgångsläget och H2-rubrikerna klickbara för att fälla ut kapiteltexten.

Då H2-rubrikerna blir klickbara länkar/element är dessa blå. (Jämför med klickbara rubriker i puffar som också är blå. Vanliga, ej klickbara, H2-rubriker på desktop är röda.)

Syftet med att fälla ihop kapitlen i mobil är att skapa god översikt över innehållet samt göra det enkelt att hitta och navigera sig till rätt information.

Desktop

Mobil

Do’s and Don’ts

Undvik alltför många H2or på sidan, så komponenten inte blir längre än sidhöjden på desktop.

Tillgänglighet

-

Research på komponenten

-

Relaterade resurser/komponenter

Status

Status

Status
colourGreen
titleFärdig Validerad

Publicerad

2020-01-18

Senast uppdaterad

2020-01-20