Jämförda versioner

Nyckel

  • Dessa rader lades till.
  • Denna rad togs bort.
  • Formateringen ändrades.
Kommentera: Nya exempelbilder för skrivbord/mobil med nya 1177-loggan.

...

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

...

Exempel på hur en sektionsstartsida kan se ut på skrivbordetImage Added

Exempel på hur en sektionsstartsida kan se ut på mobilenImage Added

Designspecifikation

En sektionsstartsida är en navigationssida som samlar och ger en överblick över innehållet och underliggande sidor inom en hel huvudingång, så kallad sektion. En sektion motsvarar en huvudingång i toppmenyn 

Sidan innehåller en yta, sidöversikt, med brickor som visar underliggande sidor, samt dess eventuella underliggande sidor en nivå ner i strukturen. Navigationsbrickorna som används på sektionsstartsidor är de brickor med länkar.

Det finns möjlighet att växla mellan brickvy och listvy via toggleknappar till höger ovanför ingångslänkarna. På mobil används enbart listvyn, för att ge så bra överblick av innehållet som möjligt.

Sidan kan bli förhållandevis lång och med många länkar. Syftet är att ge en fyllig och omfattande översikt på innehållet i sektionen, samt ge möjlighet att direkt gå vidare till fördjupad information. 

Sektionsstartsidan nås via en översiktslänk i megamenyn (ej implementerat på 1177.se) eller i mobilmenyn.  

Nedanför sidöversikten finns möjlighet att lägga upp relaterade artikelpuffar.

Brickor och listlänkar

  • Brickor visar en kort beskrivning samt länkar till underliggande sidor, vilket hämtas automatiskt. Brickor kan även visa bilder, men huvudfokus ska ligga på att visa upp länkarna.

  • Textlänkarna visar enbart rubriken på de underliggande sidorna och hämtas också automatiskt.

Brickorna som visas upp ska presenteras på ett enhetligt sätt. Blanda inte brickor där några visas med bild och andra med bara text. Syftet är att ge en enhetlig översikt, som inte ska upplevas som viktad eller prioriterad.  

Do’s and Don’ts

  • Använd antingen bild på alla brickor eller inte alls.

  • Om bild saknas på brickor så finns möjlighet att stänga av bildvisning i Epi, så att samtliga brickor på den sidan endast visas med text.

  • Använd inte brickvy på mobil.

  • Underlänkar visas på brickorna på sektionsstartsidor.

Tillgänglighet

-

Research på komponenten

-

Relaterade resurser/komponenter

Status

Status

Status
colourYellow
titleFärdig för test / inväntar granskning

Publicerad

2020-01-18

Senast uppdaterad

2020-01-20