🎠 Case-karrusel
En lille, selvstændig case-karrusel du kan smide ind på din egen side og vise dine resultater/cases på en pæn, interaktiv måde. Ingen plugins, ingen afhængigheder, ren HTML/CSS/JS. Perfekt til freelancere, konsulenter og bureauer der vil vise deres cases uden at bygge det hele fra bunden.
Lavet af RM Marketing. Brug den frit, også kommercielt. Vi opdaterer og fikser den løbende.
Hvad den kan
- Vandret karrusel med "peek" (næste kort stikker halvt frem, så man ved der er mere)
- Pile + træk-med-mus + swipe på mobil (blødt, glidende momentum, ikke hårdt snap)
- Klik på et kort åbner en modal med hele forløbet (udgangspunkt, hvad I gjorde, resultat, citat)
- Filter (fx E-commerce / Lead gen), valgfrit
- Alt er scoped under
.cc-, så det ikke kolliderer med resten af din side
- Skifter du bare farverne, ser det ud som dit eget brand
⚡ Sådan bruger du den (3 trin)
- Åbn
component.html og kopier hele indholdet.
- Sæt det ind i en "Custom HTML" / HTML-blok på din side (Elementor, Webflow, WordPress, Squarespace, ren HTML, lige meget hvad).
- Rediger
CASES-listen nederst i <script> med dine egne cases. Færdig. ✅
Undervejs:
- Skift brand-farver øverst i
:root (én linje pr. farve).
- Skift kontakt-/booking-linket: søg efter
BOOKING_LINK i koden.
🧭 Før du udfylder, 3 hurtige beslutninger
Det tager 5 minutter og gør dine cases meget stærkere.
1) Hvordan deler du dine cases op?
Vælg én simpel opdeling og hold dig til den. De mest almindelige:
- E-commerce vs. Lead gen (webshops vs. dem der sælger på leads/opkald)
- B2B vs. B2C
- Eller din egen (fx branche, ydelse, land)
Sæt opdelingen som eyebrow på hvert kort (fx "E-commerce" eller "Lead gen · Anlægsgartner"). Vil du have filter-knapper, så grupper dine cases efter den.
2) Hvor meget må du vise? (fortrolighed, det vigtigste)
Spørg altid kunden først. En god tommelfingerregel:
| Med kundens logo/navn | Anonym case |
|---|
| Kroner/omsætning/profit i tal | ❌ nej | ✅ ja |
| Konkrete niveauer (fx "POAS 2,1x", "306 leads") | ❌ nej | ✅ ja |
| Forbedring i % (fx "+30% POAS", "+97% leads") | ✅ ja | ✅ ja |
| Branche/segment | ✅ ja | kun bredt (fx "webshop") |
Kort sagt: viser du logoet, så vis kun forbedringen (%), ikke de rå tal. Vil du vise de vilde absolutte tal, så gør casen anonym (ingen logo/navn). Så er den følsomme information ikke afsløret.
3) Hvor detaljeret / hvor langt ned i maskinrummet?
I "hvad vi gjorde"-delen: hold det overordnet og strategisk, ikke en trin-for-trin opskrift. Nævn hvad I gjorde og hvorfor det gav værdi for kunden, ikke de præcise indstillinger, værktøjer og knapper, så en konkurrent kan kopiere det 1:1. Fx "Feed-optimering" er nok, ikke "ret disse 3 titel-felter og condition-attributten".
Og periode: vælg en god periode, du behøver ikke belægge den præcise måned. Nok til at man kan se fornuften.
🧩 Felterne i en case
Hver case i CASES-listen:
| Felt | Hvad | Krav |
|---|
eyebrow | Lille label (segment/branche) | ja |
logo | Billed-URL til kundelogo | '' for intet logo |
kpi | Det store tal (fx "+76%") | ja |
kpiLabel | Tekst efter tallet | ja |
tags | 1-3 små "chips" | ja |
title | Overskrift på kortet | ja |
intro | Udgangspunktet (situationen før) | ja |
actions | Liste af { t: hvad, w: hvorfor } | ja |
table | Før/efter-tabel [[række],[række]...] | valgfri |
quote | Citat eller pointe | valgfri |
Logoer: brug kundens rigtige logo (helst en PNG/SVG med gennemsigtig baggrund). Ligger logoet kun på kundens site, kan du som regel hente det derfra. Er det et hvidt logo, virker det ikke på en lys baggrund, brug en mørk/farvet version eller kundens ikon.
🎨 Tilpasning
- Farver: ret variablerne i
:root øverst (--cc-accent, --cc-dark, --cc-num osv.).
- Booking-link: søg efter
BOOKING_LINK og skift href.
- Peek-bredde: i
.cc-card styrer flex:0 0 min(340px,72%) hvor meget af næste kort man ser. Lavere % = mere peek.
- Momentum/glid: i JS'en styrer
vel * 1.15 hvor langt den glider efter et træk, og v *= 0.95 hvor blødt den bremser (tættere på 1 = glider længere).
- Snap: vil du have kortene til at "klikke" på plads igen, sæt
scroll-snap-type:x proximity i .cc-track.
📄 Licens
MIT, brug den frit, ret i den, byg videre på den, også kommercielt. En lille kredit til RM Marketing er altid velkommen, men ikke et krav.
Fundet en fejl eller har et ønske? Åbn et issue, så kigger vi på det.
