menu

Ingångar

Ingångar används för att leda användaren vidare till mer prioriterat innehåll. De kan t ex placeras i början av en huvudsida för att lyfta fram viss innehåll på undersidor eller efter en artikel för att lyfta fram relaterat innehåll. Ingångarna är ett perfekt stället att personalisera eller lyfta ett innehåll längre ner i strukturen.

Huvudingångar

Denna typ är framförallt till för att styra användargrupper åt rätt håll och prioritera på webbplatsen och bör användas högt upp i strukturen. Ingångarna placeras på en eller flera rader. Är antalet ingångar ojämt så lämnas ytan tom automatiskt. Ingången består av bild, rubrik, ingress och CTA (uppmaning). Ingången är klickbar.

Tänk på

  • Ingångar med tre kolumner ska inte representera ALLA sidor längre ner i strukturen utan dom som är mest relevanta. Alla sidor hittar man istället i megamenyn.
  • Försök att undvika att ha en ingång per rad i utgångsläget.
  • Variera bildernas utseende så det uppstår en dynamik i innehållet. Komplettera foton med illustrationer eller piktogram där det passar.
  • En lockande rubrik.
  • En beskrivande ingress på max 140 tecken
  • En CTA (knappen) som uppmanar eller visar på vad som händer när jag klickar

Rekomenderad placering

  • Högt upp på sidan.
  • Efter hero eller ö med eller utan sektionsrubrik (för sektionen ingångar, t ex “Mina tjänster”).
  • Efter pageheader utan sektionsrubrik

Kan exempelvis användas på nivåerna:

  • sodra.com
  • sodra.com/Om Södra
  • sodra.com/Om Södra/Pressrum

Exempel

3 kolumner

4 kolumner

6 kolumner

Megaingångar

Megaingångar används på startsidan och sparsamt på sektionsidor. Syftet men megaingångarna är att styra användargrupper åt rätt håll och ge en känsla för webbplatsen och dess innehåll. Ingången består av bild, rubrik, ingress och CTA (uppmaning). Ingången är klickbar.

Tänk på

  • Megaingångar representerar inte ALLA sidor längre ner i strukturen utan dom som är mest relevanta. Alla sidor hittar man istället i megamenyn
  • Alltid fyra stycken
  • Variera bildernas utseende så det uppstår en dynamik i innehållet
  • Välj en bild som inte är för detaljerad och som fungerar att ha som bakgrund med vit text på
  • En lockande rubrik
  • En beskrivande ingress på max 140 tecken
  • En CTA (knappen) som uppmanar eller visar på vad som händer när jag klickar

Rekomenderad placering

  • Dessa placeras alltid efter pageheader eller hero.

Kan exempelvis användas på nivåerna:

  • sodra.com
  • sodra.com/Om Södra

Exempel

Den här modulen håller sig normalt inom den normala maxbredden men finns i en variant som blir extra bred. Det åstakommer man genom att lägga till klassen .is-wide på rotelementet.

Mega-mini-ingångar

Mega-ingångar-mini används sparsamt på undersektionsidor. Syftet men mega-mini-ingångarna är att styra användargrupper åt rätt håll och ge en känsla för webbplatsen och dess innehåll. Ingången består av bild, rubrik, ingress och CTA (uppmaning). Ingången är klickbar.

Tänk på

  • Mega-mini-ingångar representerar inte ALLA sidor längre ner i strukturen utan dom som är mest relevanta. Alla sidor hittar man istället i megamenyn
  • Alltid sex stycken
  • Variera bildernas utseende så det uppstår en dynamik i innehållet
  • Välj en bild som inte är för detaljerad och som fungerar att ha som bakgrund med vit text på
  • En lockande rubrik
  • En beskrivande ingress på max 50 tecken
  • En CTA (knappen) som uppmanar eller visar på vad som händer när jag klickar

Rekomenderad placering

  • Dessa placeras alltid efter pageheader eller hero.

Kan exempelvis användas på nivåerna:

  • sodra.com/Om Södra
  • sodra.com/Om Södra/Pressrum

Exempel

Den här modulen håller sig normalt inom den normala maxbredden men finns i en variant som blir extra bred. Det åstakommer man genom att lägga till klassen .is-wide på rotelementet.

Underliggande ingångar (fyra kolumner)

Denna typ är framförallt till för att visa upp underliggande sidor i strukturen. Ingångarna placeras på flera rader och ska vara klickbara. Är antalet ingångar ojämt så lämnas ytan tom automatiskt. Ingången består av bild, rubrik, ingress. Ingången är klickbar.

Tänk på

  • Ingångar med fyra kolumner behöver inte representera alla sidor längre ner i strukturen men dom kan göra det. Alla sidor hittar man i megamenyn.
  • Försök att undvika att ha en ingång per rad i utgångsläget.
  • Variera bildernas utseende så det uppstår en dynamik i innehållet. Komplettera foton med illustrationer eller piktogram där det passar.
  • Välj en bild som inte är för detaljerad och som fungerar att ha som bakgrund med vit text på
  • En lockande rubrik
  • En beskrivande ingress på max 50 tecken

Rekomenderad placering

  • Högt upp på sidan eller långt ner på sidan.
  • Efter hero eller ö med eller utan sektionsrubrik (för sektionens ingångar, t ex “Mina tjänster”)
  • Efter pageheader utan sektionsrubrik

Kan exempelvis användas på nivåerna:

  • sodra.com/Om Södra/Pressrum
  • sodra.com/Om Södra/Pressrum/Tjänster

Exempel

Den här modulen håller sig normalt inom den normala maxbredden men finns i en variant som blir extra bred. Det åstakommer man genom att lägga till klassen .is-wide på rotelementet.

Relaterade och underliggande ingångar (sex kolumner)

Denna typ är framförallt till för att visa upp underliggande eller liknande sidor i strukturen. Ingångarna placeras på flera rader och ska vara klickbara. Är antalet ingångar ojämt så lämnas ytan tom automatiskt. Ingången består av bild och rubrik. Ingången är klickbar.

Tänk på

  • Ingångar med sex kolumner behöver inte representera sidor längre ner i strukturen utan snarare sidor på samma nivå som sidan dom finns på.
  • Försök att undvika att ha en ingång per rad i utgångsläget.
  • Foton används
  • En beskrivande rubrik
  • Använd alltid sektionsrubrik (för sektionens ingångar, t ex “Liknande tjänster”)

Rekomenderad placering

  • Längst ner på sidan, efter huvudinnehållet och innan sidfoten.

Kan exempelvis användas på nivåerna:

  • sodra.com/Om Södra/Pressrum
  • sodra.com/Om Södra/Pressrum/Tjänster

Exempel

Den här modulen håller sig normalt inom den normala maxbredden men finns i en variant som blir extra bred. Det åstakommer man genom att lägga till klassen .is-wide på rotelementet.