Grund: vad module-big-button är

module-big-button är en ren CTA-modul som renderar en stor klickyta med ikon + text, typiskt placerad där du vill driva konvertering.

Modulen är tekniskt enkel men viktig: den är statisk, tydlig, och har inbyggd auto-logik för länkformat och ikonval via build-steget.

Den fungerar bra för bokning, kontakt, nedladdning eller intern navigering till sektioner som #module-contact.

Val 1: kärnnycklar och copy

Kärnan i modulen är display, aria_label, text, target, link och icon, samt valfri bakgrund under background.*.

text ska vara kort och handlingsdriven, medan aria_label behöver förklara vart knappen leder. target används normalt som _self men kan sättas till _blank för externa mål.

Modulen saknar items-array, vilket gör den snabb att konfigurera och lätt att återanvända mellan sidor.

Val 2: auto_href-logik i kompilatorn

Build-funktionen buildAuto() genererar big_button.auto_href från link/href.

  • link: phone försöker bygga tel: från flera fallback-fält (hero/contact/site/page).
  • link: email försöker bygga mailto: från e-postfält eller user/domain-kombination.
  • link: #sektion blir intern ankar-länk.
  • link: https://... blir extern länk.

Om inget matchar används explicit href eller fallback #. Detta gör modulen robust även när input varierar mellan projekt.

Val 3: ikonval, appearance och design

big_button.auto_svg genereras också i buildAuto(). Om icon är satt används den direkt (utom none). Om ikon saknas väljs ikon automatiskt från länktypen (phone/email/section/link).

Stylingnivåer:

  • big_button.appearance blir auto_class/auto_style
  • designfärger kommer från design.background_colors.big_button och design.text_colors.big_button
  • typografi från design.font_sizes.big_button

Resultatet är en CTA som följer designsystemet men ändå kan få lokal visuell accent via appearance-tokens.

Val 4: template-rendering och tillgänglighet

I template renderas modulen som ett <a>-element med klasserna card-button big-button track-clicks. Ikonen injiceras före texten via .

Semantiskt används aria-label på knappen. I CSS finns tydligt fokusläge med :focus-visible, och på mobil blir knappen fullbredd för lättare träffyta.

Det finns ingen separat JS-init för modulen, vilket minskar komplexitet och gör beteendet mycket förutsägbart.

Val 5: schema, SEO och AI-optimering

För denna modul är Action ofta rätt schema-typ, särskilt vid bokning eller tydlig CTA. Om knappen leder till telefon/e-post kan ContactPoint komplettera.

Håll schema fokuserat på handlingen: använd stabil @id, tydligt name och korrekt target. Undvik att duplicera globala Organization/WebPage-noder här.

SEO-mässigt fungerar modulen bäst när knapptext och aria-label är konkreta och konsekventa med sidans faktiska konverteringsmål.