Sådan bruger du denne skabelon (trin for trin)

🧩 VK Intro BG – Hurtig guide

1) Redigér tekst
2) Vælg størrelse: vk-intro-bg__frost–m (eller xs/s/l/xl/xxl) – og føj til “FROST baggrund” (.vk-intro-bg__frost)
3) Vælg look: vk-intro-bg__frost–light / –medium / –heavy
4) Brug &{ –vkfs-* } hvis du skal finjustere

⚠ Brug ikke #brxe-ID’er
⚠ Undgå breakpoint-specifik Custom CSS

Instruktioner

1. Kopiér sektionen

• Kopiér hele sektionen vk-intro-bg (ikke kun frost-wrapperen), så du får både content + baggrundsillustration med.

2. Redigér tekstindhold

• Gå til vk-intro-bg__content → vk-intro-bg__frost

• Ret:

  • Accent/tagline (valgfri)

  • Overskrift (H2)

  • Underrubrik (p)

  • Knap (link + tekst)

3. Vælg spacing (størrelse) på frost-wrapperen

• Marker containeren med klassen vk-intro-bg__frost

• Tilføj én størrelse-klasse:

  • vk-intro-bg__frost–xs / –s / –m / –l / –xl / –xxl

Tip: Start med –m eller –l og justér derfra.

4. Vælg “frost look” (styrke)

• På samme element (vk-intro-bg__frost) tilføj én look-klasse:

  • vk-intro-bg__frost–light (diskret)

  • vk-intro-bg__frost–medium (standard)

  • vk-intro-bg__frost–heavy (meget tydelig / hero)

5. Tilpas baggrundsillustrationen

• Marker vk-intro-bg__baggrundsillustration

• Justér typisk kun:

  • Højde (responsive clamp)

  • Position (bund center)

  • Bredde (må gerne “flyde ud over”)

6. Avanceret: finjustér kun denne instans (uden at røre global CSS)

• Marker vk-intro-bg__frost (på den instans du arbejder på)

• Gå til elementets Custom CSS og brug kun:

  • &{ … } (IKKE #brxe-…)

Eksempel:

&{
  --vkfs-bg: rgba(255,255,255,.55);
  --vkfs-blur: 8px;
  --vkfs-gap: var(--space-s);
  --vkfs-solid-a: 26%;
  --vkfs-solid-b: 74%;
}

---

Hvad denne skabelon gør (kort)

• Lægger en SVG-illustration som baggrund i bunden (bund center, må gerne gå ud over kanter).

• Lægger en “frosted” fade-baggrund bag teksten, så teksten står klart, men illustrationen stadig er synlig.

• Sørger for at fade/gradient ikke påvirker teksten (kun frost-laget).

---

Struktur (så du ved hvor tingene skal ændres)

• vk-intro-bg

  (øverste wrapper for hele sektionen)

  • vk-intro-bg__content

    (indholdets container og max width)

    • vk-intro-bg__frost

      (frosted wrapper: her styrer du spacing + look)

      • Accent/tagline (valgfri)

      • Overskrift

      • Underrubrik

      • Knap

  • vk-intro-bg__baggrundsillustration

    (position/height/width for baggrunds-SVG)

    • vk-intro-bg__svg

---

Presets du kan bruge (hurtigt overblik)

Spacing presets (vælg én)

• vk-intro-bg__frost–xs

• vk-intro-bg__frost–s

• vk-intro-bg__frost–m

• vk-intro-bg__frost–l

• vk-intro-bg__frost–xl

• vk-intro-bg__frost–xxl

Look presets (vælg én)

• vk-intro-bg__frost–light

• vk-intro-bg__frost–medium

• vk-intro-bg__frost–heavy

---

Variabler du kan override pr. instans (kun hvis du skal)

Frost / gennemsigtighed

• –vkfs-bg (desktop baggrund)

• –vkfs-blur (desktop blur)

• –vkfs-bg-mobile (mobil baggrund)

• –vkfs-blur-mobile (mobil blur)

Afstand / layout

• –vkfs-gap (afstand mellem elementer inde i frost-wrapper)

• –vkfs-padding-y / –vkfs-padding-x

• –vkfs-padding-y-mobile / –vkfs-padding-x-mobile

• –vkfs-radius

Fade-område (hvis du vil ændre hvor “fast” midten er)

• –vkfs-solid-a (start på “solid” område)

• –vkfs-solid-b (slut på “solid” område)

Jo tættere solid-a og solid-b er på hinanden, jo mere “kort” bliver den solide zone.

Her er en tekst, du kan indsætte i din Editor-Only note i toppen af skabelonen – i samme tone og struktur som resten.

---

🔍 Blur-styring (valgfrit)

Du kan styre, om frost-laget skal have blur – helt uafhængigt af spacing og opacity.

Sådan gør du

1. Marker elementet med klassen vk-intro-bg__frost

2. Tilføj én blur-klasse:

• vk-blur-light

• vk-blur-medium

• vk-blur-heavy

• vk-no-blur

Eksempel:

vk-intro-bg__frost vk-intro-bg__frost--m vk-blur-medium

---

Hvad de gør

• vk-no-blur

  Fjerner blur helt (kun gennemsigtig baggrund + fade)

• vk-blur-light

  Diskret blur

• vk-blur-medium

  Standard blur

• vk-blur-heavy

  Tydelig blur (egnet til hero-sektioner)

---

Avanceret (kun hvis nødvendigt)

Du kan override blur pr. instans via Custom CSS:

&{
  --vkfs-blur-strength: 8px;
  --vkfs-blur-mobile-strength: 12px;
}

Undgå at skrive backdrop-filter direkte – brug altid variablerne.

---

Best practice

• Vælg først spacing-preset

• Vælg derefter look-preset

• Vælg til sidst blur-preset

Hold dem adskilt. Det gør komponenten forudsigelig og let at genbruge.

---

Regler / best practice (vigtigt)

✅ Gør:

• Brug presets først (klasser) – det er hurtigst og mest konsistent.

• Brug &{} til instans-tilpasning (så sektionen kan kopieres uden at CSS går i stykker).

🚫 Undgå:

• At bruge #brxe-… selectors (de ændrer sig når du kopierer).

• At skrive Custom CSS i breakpoint-faner (giver ofte “mystery bugs”).

• At lægge ekstra baggrund/blur på de enkelte tekst-elementer (skaber dobbelt lag og hårde kanter).

---

Hvis du vil, kan jeg også lave en kort “cheat sheet”-udgave (2-3 linjer) som du kan sætte øverst i noten, så man ser det vigtigste med det samme.

Here goes your text … Select any part of your text to access the formatting toolbar.