Hoppa till innehåll
100 cyklar jämförda Uppdaterat sommaren 2026
Lådcykelguiden logotyp Lådcykelguiden

Internt dokument, indexeras ej

Designsystemet för Lådcykelguiden

Levande referens. Fullständig dokumentation med regler och beslutslogg finns i Documents/design-system/ladcykelguiden.md.

Riktning: premiummagasin för dyra cykelköp. Midnattsslate, korall-CTA, Fraunces och papper. Lugn auktoritet, inga effekter.

Färg

Tre ägda skalor via omdefinierade Tailwind-namn i @theme. Klassnamnen heter green/orange/emerald men värdena är slate, korall och salvia.

Primär: midnattsslate (green-*)

Rubriker, mörka band, mega-menyn, sekundära knappar. green-900 är sidans ink.

50
#F4F6F8

100
#E5E9EE

200
#CAD2DC

300
#A4B0BF

400
#6F8197

500
#4A5C73

600
#344458

700
#243246

800
#1A2332

900
#11182A

950
#0A0F1C

CTA: korall (orange-*)

Enbart handling: affiliate-knappar, fokusring, badges för utmärkelser. Aldrig som dekorfärg på ytor.

50
#FFF3EE

100
#FFE2D5

200
#FFC2A8

300
#FF9D78

400
#FF7C53

500
#F4633A

600
#E2522C

700
#BD3F1F

800
#97311A

900
#7A2917

950
#4A170D

Sekundär: salvia (emerald-*)

Positiv semantik: fördelar, bockar, guide-accenter.

50
#F0F5F2

100
#DBE7DF

200
#B8CFC1

300
#8FB39D

400
#6BA284

500
#4F8A6A

600
#3C6F54

700
#2F6E4D

800
#235340

900
#173D2C

950
#0E2519

Ytor och neutraler

  • --color-papper #FBFAF7, body-bakgrund
  • Kort och paneler: vitt mot papper
  • Inre fält (spec-rutor): gray-50
  • Text: gray-900/700/600/500, kanter gray-100/200

Semantik

  • Positivt, fördelar, bockar: emerald-600
  • Negativt, nackdelar, kryss: red-500/600
  • Betygsstjärnor och varningsrutor: amber
  • Blått och lila är förbjudna på siten

Typografi

Fraunces (serif, opsz 9–144) är rösten i alla rubriker, Inter sköter brödtext och UI. Rubriker har letter-spacing: -0.015em globalt.

H1 hero: text-3xl sm:text-4xl lg:text-5xl

Bästa lådcykeln 2026

H1 undersida: text-3xl md:text-4xl

Lådcykel för två barn

H2 sektion: text-2xl (seo-prose: 1.5/1.875rem)

Så valde vi cyklarna

H3 kortrubrik: text-xl md:text-2xl

Cargobike Classic Electric

Brödtext: text-base/text-sm, Inter, leading-relaxed

En lådcykel ersätter bilen för de flesta vardagsresor. Vi har testat lastkapacitet, backtagning och bromsverkan på samtliga modeller, i verklig stadstrafik med barn i lådan.

Etikett (dataetikett i kort och tabeller, inte eyebrow)

Motor

Länk i löptext (seo-prose)

bästa lådcyklarna 2026

Radie och djup

Tre radier: rounded-xl för kort, rounded-lg för knappar och inre fält, rounded-full för pills. Kant ELLER skugga, aldrig båda: kort har kant utan vilande skugga; skugga är reserverad för flytande lager (mega-meny, sticky-CTA) och badges ovanpå foto.

Kort

rounded-xl + border-gray-100/200, ingen skugga

Flytande lager

shadow-xl utan kant, bara dropdowns och sticky

Mörkt band

bg-green-900 solid, aldrig CSS-gradient

Knappar

Tre varianter ur AffiliateButton.astro. Affiliate-CTA:er säger alltid "Bra pris hos [Butik]". rounded-lg, font-bold, transition-colors. Fokus: global orange ring.

Bra pris hos Butiken Sekundär Outline

Demo-markup utan länkmål. Skarpa CTA:er renderas alltid via AffiliateButton med verifierad tracker-URL.

Badges och betyg

Pills är rounded-full med solid fyllning. Rankingcirkel green-800, utmärkelse orange-500. Ovanpå foto får de shadow-md för läsbarhet, det är undantaget från kant-eller-skugga-regeln.

1 Bäst i test Prisvärd

För- och nackdelar

Bockar och kryss är inline-SVG, aldrig typografiska tecken och aldrig emoji. Bock emerald-600, kryss red-600.

  • Mittmotor med bra backtagning
  • Hydrauliska skivbromsar
  • Tung att rulla utan assistans
  • Kräver stort förvaringsutrymme

Visa alla-länkar

Pilen är ett separat SVG-element med .lank-pil som glider vid hover. Aldrig ett pil-tecken i själva copyn.

Produktkort

Kanoniska kortet är LadcykelCard.astro (syskonen ElcykelCard/ScooterCard/BarncykelCard följer samma språk). Anatomi i fast ordning: ranking + badge på bilden, varumärkes-etikett, titel-länk (enda SEO-ankaret, bilden är aria-hidden), betyg, intro, spec-rutor, för/nackdelar, CTA-zon. Allt synligt utan expandering. Nedan renderas det skarpa kortet med sitens topprodukt:

#1Bäst i test

Evobike Cargo Premium Mid-Drive är ett stort steg upp från Cargo Pro: Ananda M100-mittmotor med 110 Nm vridmoment och 576 Wh batteri. Halvpriset mot Urban Arrow men med motorkraft som hanterar backar och last.

Motor

Ananda M100 mittmotor 110 Nm

Batteri

432 Wh (36V 12Ah) eller 576 Wh (36V 15Ah)

Räckvidd

30-60 km

Växlar

8-växlad Shimano Acera

Fördelar

  • Kraftfull Ananda M100-mittmotor med 110 Nm, klarar backar med full last
  • Stort 576 Wh batteri, upp till 60 km räckvidd
  • Plats för barn i EPP-låda av väderfast material

Nackdelar

  • Tung (70 kg), svår att lyfta utan ramp
  • Relativt ny modell, färre recensioner än etablerade märken
Bra pris hos Evobike Läs hela recensionen

Featured-produkt (Bäst i test-block)

Kategorisidornas toppval ovanför listan. Tintad slate-yta (bg-green-50 border-2 border-green-200 rounded-xl), korall-pill, produktbild på vit platta, varumärkes-etikett, H2/H3, intro och CTA-zon med korall-knapp + slate-textlänk.

Bäst i test totalt Evobike Cargo Premium Mid-Drive lådcykel

Evobike

Evobike Cargo Premium Mid-Drive

Evobike Cargo Premium Mid-Drive är ett stort steg upp från Cargo Pro: Ananda M100-mittmotor med 110 Nm vridmoment och 576 Wh batteri. Halvpriset mot Urban Arrow men med motorkraft som hanterar backar och last.

Snabbsvar-box (answer-first)

GEO/AEO-mönstret: ett självbärande svar direkt under bylinen, med toppvalet inbäddat (bild, badge, "Bäst för:" och CTA) som belägg. Kanoniska komponenten är SnabbsvarBox.astro. Utan featured-prop renderas bara svarsrutan, för sidor utan ett enskilt toppval.

Snabbsvar: vilken lådcykel är bäst 2026?

Tre lådcyklar sticker ut 2026: Evobike Cargo Premium Mid-Drive (bäst i test), Evobike Cargo Pro (billigast) och Ecoride Loader 806 (bäst utrustning).

Evobike Cargo Premium Mid-Drive lådcykel
Bäst i test 2026

Evobike

Evobike Cargo Premium Mid-Drive

Bäst för: Familjer som vill ha mittmotor och bättre prestanda till lägre pris

Rankad jämförelsetabell med CTA

Kanoniska komponenten är ElcykelComparisonTable.astro (ScooterComparisonTable följer samma språk): placering, miniatyr + namn + gul badge-etikett, nyckelspecar, korall-CTA per rad. Desktop = tabell, mobil = staplade kort i komponenten (aldrig h-scroll). Nedan med sitens tre högst rankade elcyklar:

Jämförelse av elcyklar: modell, betyg, motor och räckvidd
# Modell Betyg Köp
1 Ecoride Ambassador 4 Midmotor Bäst i test 4,7/5 Bra pris hos Ecoride
2 Ecoride Ambassador 4 Hubmotor Prisvärd premium 4,5/5 Bra pris hos Ecoride
3 Ecoride Tripper 4 Midmotor Premium sport 4,6/5 Bra pris hos Ecoride

Placering och betyg mäter olika saker. Betyget är modellens kvalitet inom sin egen klass, där 4,5 och uppåt betyder bäst i klassen. Placeringen väger dessutom in hur väl modellen passar det de flesta använder en elcykel till i vardagen. Därför kan en nischad modell ha högt betyg men ligga längre ner i listan. Så sätter vi betygen.

Enkel datatabell: desktop-tabell, mobilkort

Horisontell scroll är förbjuden. Global CSS stackar varje tabellrad till ett kort under 768 px, och data-label på varje td skriver ut kolumnrubriken. Smalna fönstret för att se mobilbeteendet.

Modell Motor Räckvidd
Ecoride Loader 806 Shimano EP6-Cargo 50-140 km
Ecoride Loader 802 Ananda mittmotor 40-100 km

Chips-navigering (guideindex)

Startsidans "Alla våra cykelguider" och liknande länkindex. Kolumnrubrik i Fraunces med tjock slate-underkant (border-b-2 border-green-900), chips som kantade pills: px-3 py-2 border border-gray-200 rounded-lg text-sm font-semibold, hover = slate-kant + slate-text. Ankartexten är alltid målsidans sökord, aldrig "läs mer".

Kategorikort (klickbara småkort)

Barncykel-silons "Hitta rätt storlek" och startsidans kategoriband. Hela kortet är länk (OK här: kortet ÄR länken, med en enda destination och beskrivande ankartext — till skillnad från produktkort). Anatomi: Fraunces-rubrik, dämpad meta-rad, slate-grön datauppgift. Hover = kantskifte, aldrig skugga.

FAQ-accordion

FaqAccordion.astro: details/summary utan JS-beroende, tangentbordsnavigerbar, svaren alltid i DOM (FAQPage-schemakravet). Frågorna på skarpa sidor speglar People Also Ask.

Demo: så beter sig accordionen

Varför har korten ingen skugga?

Systemet väljer kant eller skugga, aldrig båda. Kort och paneler har 1 px kant; skugga är reserverad för flytande lager som mega-menyn och sticky-CTA:n, plus badges ovanpå foto.

När används korall respektive slate på knappar?

Korall är enbart handling: affiliate-CTA:er. Slate (secondary) är intern navigering, till exempel länken till en fullständig recension. Outline är tertiär.

Sticky-CTA och mega-meny

StickyCTA (fixed, endast mobil)

  • Visas vid scroll över 400 px, under 768 px viewport
  • Kryss = dismissad hela sidvisningen
  • Vit panel, border-t + shadow-2xl (flytande lager)
  • Fullbredds korall-knapp, safe-area-padding
  • En per sida, samma produkt som sidans huvudrekommendation

Mega-menyns paneler

  • rounded-xl + shadow-2xl + ring-1 ring-black/5
  • Högerankrade, max-w calc(100vw-2rem)
  • aria-haspopup/aria-expanded på triggers
  • Panel-CTA: korall-knapp + slate-länk med SVG-pil
  • Mobil: hamburgare med details-grupper

Båda är flytande lager och därmed undantagen som får skugga. Testas live i sidhuvudet högst upp på den här sidan respektive på valfri money page i mobilvy.

Sidhuvud och sidfot

Båda renderas skarpt på den här sidan (överst respektive nederst) via BaseLayout. Specen:

Header (Header.astro)

  • Trust-bar överst: bg-green-600, vita USP:ar med SVG-bockar, text-xs
  • Sticky rad: vit, sticky top-0 z-40 shadow-sm, logga (SVG + Fraunces-ordbild) vänster, nav höger
  • Navlänkar: text-[15px] font-semibold, hover slate-text + green-50-platta, fokusring green-700
  • "NYTT"-markering: korall-tintad mini-pill vid ny kategori
  • Mobil: hamburgare, helskärmspanel med details-grupper, mörk overlay bakom

Footer (Footer.astro)

  • Mörk neutral yta: bg-gray-900 text-gray-400, vita rubriker
  • Brand-rad (logga + beskrivning) + länkkolumner, avdelade med border-gray-800-hairlines
  • Legal-rad: copyright, bolagsuppgifter, integritetspolicy, mail (alltid email_off-wrappad)
  • Affiliate-disclosuren bor HÄR och bara här — max 2 rader, låg emfas
  • Länk-hover: hover:text-gray-300, transition-colors

Money page-mallen

Fast kärna + togglemoduler per kategori. Kanonisk referens i skarp drift: /barncykel/. Fullständig spec med toggle-matris i avsnitt 6c i dokumentationen.

Öppna levande demo med togglemoduler

Kärna (fast ordning)

  1. Kompakt silo-hero (solid slate, max py-10)
  2. Byline, kompakt enradig
  3. Snabbsvar-box med inbäddat toppval (= StickyCTA-produkten)
  4. Produktkort, sedan jämförelsetabell
  5. Köpguide (answer-first H2:ar, max-w-3xl)
  6. GEO-block (verifierade källor, obligatoriskt)
  7. FAQ-accordion på gray-50-band, minst 8 frågor
  8. Relaterat (kategorikort/chips)
  9. StickyCTA på mobil

Togglemoduler (på/av per kategori)

  • Segmentväljare — barncykel (storlek), elcykel (herr/dam/bruk), elsparkcykel (segment)
  • Toppval per segment — barncykel
  • Cross-segment-länkar — elcykel dam/herr, barncykel-storlekar
  • Info-/datatabell — storleksguide, klassgränser
  • Regel-/lagmodul — elsparkcykel, lådcykel
  • HowWeReviewed — alla topplistor (mörkt kort; band bara på startsidan)
  • Guide-länkgrupp — silor med 3+ stödguider

Mörka band: metodik och redaktör

Startsidans två E-E-A-T-band renderas nedan skarpt. Båda ligger på solid mörk slate (aldrig gradient), vit Fraunces-rubrik, korall som enda accent. HowWeReviewed-kriterierna speglar alltid metodsidan; EditorSpotlight-bakgrunden får aldrig innehålla overifierade meriter.

Så har vi granskat

Vi köper inte produkterna och testar dem inte i labb. Betyget är en redaktionell sammanvägning av tillverkarnas specifikationer, oberoende tester och utbudet hos svenska butiker, satt på en skala 1 till 5 och avrundat till en decimal.

Ingen tillverkare eller butik kan betala för placering eller betyg.

Metoden bakom betygen

Fem kriterier ligger bakom varje betyg

  • Lastkapacitetmaxvikt, lastutrymmets mått, antal barn modellen är godkänd för
  • Elmotor och räckviddmotortyp, vridmoment, batteri i wattimmar, räckvidd i oberoende tester
  • Körkomfortsittställning, styrrespons, fjädring och däck enligt oberoende recensioner
  • Säkerhetbromsar, bälten för barn, belysning, CE-märkning och återkallelser
  • Förvaring och praktiska detaljermått, vikt, regnskydd och tillbehör
Axel Jönemyr, grundare och redaktör för Lådcykelguiden

Vem står bakom Ladcykelguiden.se?

Axel Jönemyr, grundare och redaktör

Jag startade Lådcykelguiden för att svenska barnfamiljer ska kunna jämföra lådcyklar på riktiga grunder: pris, räckvidd, lastkapacitet, motor och säkerhet, utan att först läsa sig igenom tillverkarnas marknadsföring.

Jag har cyklat i över 15 år, på landsväg, MTB och gravel, och har över 6 000 mil på landsvägen bakom mig. Det har blivit Vätternrundan och en rad andra långlopp, några tävlingar och träningsläger på bland annat Mallorca. Jag kör lådcykel flera gånger i veckan, både för att skjutsa barnen och för ärenden och utflykter i vardagen.

Om Axel Jönemyr

Motion

  • Standard: transition-colors, cirka 160 ms ease. Inga fade-in-up-sektioner.
  • En primär rörelse per vy (startsidan: rullordet i H1). Money pages above the fold: noll dekorativ rörelse.
  • prefers-reduced-motion stänger av allt.