Skiforeningen · Designsystem

Landingsside­malen

Én gjenbrukbar mal som gjør en hovedkategori om til en visuell, kuratert oversikt med tydelige innganger videre — ikke en menymappe som skjuler innhold i dybden.

01 Hero 02 Innganger 03 Kontekst-modul 04 Redaksjonelt 05 Vedvarende CTA
01 · Anatomi

Fem faste seksjoner — samme rekkefølge hver gang

Strukturen er konstant. Det er innholdet i hver seksjon som skifter mellom sidene — aldri rytmen. Rammen rundt (Header øverst, Footer nederst) er lik på alle landingssider.

1
Hero
Inngangen

Tittel + én forklarende setning som sier hva siden er, og den primære CTA-en — oppgaven folk oftest kommer for.

Én H1 · brødsmuler (Forside → Kategori) · naturbilde eller rolig navy-flate med gradient-overlegg.

Breadcrumbs Hero / SporetHero Button
Forside → Kategori
Primær-CTA
2
Innganger
Veivalget

3–8 visuelle inngangskort. Hvert kort er en CTA inn i dypere innhold — ikke en passiv lenke.

Maks 8 kort. Over det: del i undergrupper med små overskrifter. Hele kortet er klikkbart, med beskrivende lenketekst.

EntryCard sf-card-grid
3
Kontekst-modul
Verktøyet

Én relevant funksjonell modul, valgt per side: kart, kalender, filterrad eller prissammenligning.

Dette er den ene slissen som varierer mest mellom sidene. Lazy-last tunge moduler som kart.

Kart ActivityCard Chip-filter MembershipTable
Kart Kalender Filter Tabell
Én utskiftbar modul
4
Redaksjonelt
Inspirasjonen

2–3 nyhetskort eller serie-innslag som inspirerer videre — «Markaturen», «Skifluensern».

Sesongbevisst der det er relevant. Aldri mer enn tre — dette er krydder, ikke arkiv.

NewsCard
5
Vedvarende CTA
Den røde tråden

«Bli medlem» + sesongrelevant «Åpne Sporet ↗». Den samme oppfordringen på hver eneste side.

Rolig, tonet flate — ikke skrikende. Bruk systemets vedvarende CTA-komponent.

MembershipModule Button
Bli medlem
Åpne Sporet ↗
Stabil ramme

Header øverst, Footer nederst

Navigasjon (maks 6 punkter), Søk, Sporet ↗, «Bli medlem», Min side og sesongbryteren er likt på alle sider. På mobil ligger Sporet- og Bli medlem-knappene fast i header. De fem seksjonene lever mellom denne rammen.

Headerstabil
↑ De fem seksjonene ↑
Footerstabil
Mobil — alt stables
SkiforeningenSporet ↗
1 · Hero
2 · Inngangskort
3 · Kontekst
4 · Redaksjonelt
5 · Bli medlem

Inngangskort 1 per rad eller horisontal scroll. Faste Sporet-/Bli medlem-knapper i header.

02 · Slik fylles malen

Seks sider, samme fem slisser

Hver kategori arver malen og fyller de samme slissene med sitt eget innhold. Hero-CTA-en er alltid «oppgaven folk oftest kommer for».

Side ① Hero — primær-CTA ② Innganger (inngangskort) ③ Kontekst-modul ④ Redaksjonelt Sesong
{{ row.side }} {{ row.hero }} {{ row.innganger }} {{ row.kontekst }} {{ row.redaksjonelt }} {{ row.sesong }}
03 · Gjenkjennelig på tvers

Samme rytme — ulikt innhold

Tre ekte instanser av malen. Følg de nummererte slissene nedover hver side — rytmen er identisk, men kontekst-modulen skifter: kart, kalender, prissammenligning.

skiforeningen.no/{{ ins.key }} {{ ins.season }}
① Hero
{{ ins.hero.imageAlt }}
Forside › {{ ins.hero.overline }}
{{ ins.hero.overline }}

{{ ins.hero.title }}

{{ ins.hero.lead }}

{{ ins.hero.primary }} {{ ins.hero.secondary }}
② Innganger
③ {{ ins.context.overline }}

{{ ins.context.title }}

{{ ins.context.text }}

{{ a }}
Kart-teaser for Marka {{ ins.context.pill }} →

{{ ins.context.text }}

{{ f }}

{{ ins.context.text }}
④ Redaksjonelt · {{ ins.editorial.title }}
⑤ Vedvarende CTA

Bli med på Marka-effekten

Som medlem støtter du løyper, turmål og friluftsliv for alle.

Bli medlem Åpne Sporet ↗