Grund: vad module-cta är

module-cta är en fokuserad handlingssektion i CCMS med rubrik, kort text, bakgrundsbild och en primär knapp.

Den används när du vill driva en tydlig konvertering, till exempel kontakt, bokning, offert eller prenumeration.

Modulen är avsiktligt enkel för att kunna vara snabb, tydlig och lätt att återanvända mellan olika sidor.

Val 1: kärnnycklar och innehållsstruktur

Top-level ligger i cta med nycklar som module_type, display, appearance, aria_label, title, text_html och is_small.

Bakgrunden styrs via background.have_background, background.background_src och background.background_overlay. Kortets bild styrs via background_image.*.

Primär handling ligger i button med display, text, href, target och aria_label.

Val 2: storleksvariant och visuell ton

is_small växlar till en kompakt variant i CSS (.cta-wrap.is-small) och ändrar modulens proportioner.

appearance kompileras till cta.auto_class och cta.auto_style, vilket gör att CTA:n kan få animation/hover/stil utan tung runtime.

Globala designvärden i design.* styr bland annat knappfärg, overlayfärg, textstorlek och border-radius.

Val 3: bakgrundsbild, overlay och CTA-knapp

background_image.src går via bildmanifestet och kan renderas med AVIF/JPG-source-set samt fallback-bild i template.

Knappen renderas direkt från cta.button.href. Till skillnad från hero/big-button finns ingen separat auto-href-resolver för module-cta-knappen.

Använd därför fulla och avsiktliga länkar direkt i innehållet (#ankare, https://..., mailto: eller tel:).

Val 4: runtime, tracking och länkbeteende

CTA-knappen har klassen track-clicks och går genom den generella länktrackern i template-scriptet.

Extern https://-länk trackas med kort tidsbudget innan navigering. mailto: och tel: trackas också, men på desktop scrollas ej-avslöjade tel/mail-länkar först till module-contact.

Detta påverkar CTA-cases där knappen pekar direkt på telefon eller e-post och är viktigt att känna till vid implementation.

Val 5: SEO, schema och AI-optimering

En CTA bör ha en tydlig handling i rubrik + knapptext och en kort motivering i text_html. Undvik vaga formuleringar.

Om modulen har eget schema, välj typ utifrån faktisk handling (t.ex. SubscribeAction, ReserveAction eller DownloadAction) och återanvänd globala noder där det passar.

Håll bildens alt beskrivande och konsekvent med CTA:ns budskap för bättre tillgänglighet och bättre AI-sammanfattningar.