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.

  1. Redigér tekstindhold

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

  • Ret:

    • Accent/tagline (valgfri)

    • Overskrift (H2)

    • Underrubrik (p)

    • Knap (link + tekst)

  1. 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.

  1. 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)

  1. Tilpas baggrundsillustrationen

  • Marker vk-intro-bg__baggrundsillustration

  • Justér typisk kun:

    • Højde (responsive clamp)

    • Position (bund center)

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

  1. 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.

Seneste nyheder

arkiv

Læs alle nyheder