hero style 1 - Settings 1
<section id="id-{{ id }}" class="[ {{ class }} ] relative py-1000 bg-(--color-bg){{ if text_color }} text-(--color-text){{ /if }}"{{ unless text_color }} data-auto-contrast{{ /unless }} aria-label="{{ if text }}{{ if text | bard_html | contains:h1 }}{{ text | raw | bard_items | where:type:heading | first | bard_text }}{{ endif }}{{ endif }}" {{ visual_edit outline_inside="true" section_orderable="true" }}>
<div class="[ content ] wrapper relative z-10" >
<div class="flow-y flow-space-1-5em prose-p:text-current/80 prose-p:max-w-[75ch]" {{ visual_edit field="blocks" insertable="true" }}>
{{ blocks }}
{{ partial src="blocks/{type}" headline_tag="h1" headline_size="text-800" }}
{{ /blocks }}
</div>
</div>
<div class="[ media ] absolute top-0 right-0 h-full w-full">
{{ if (media | ends_with('.mp4')) }}
<video class="w-full h-full object-cover" loop autoplay muted="true" src="{{ media }}"></video>
{{ else }}
{{ partial:components/picture :imagePath="media" }}
{{ endif }}
</div>
</section>
{{ style_push }}
<style>
{{#
De responsive felter skriver sig selv — tag'et finder dem og laver både
desktop-værdierne og d
display: flex;
display: flex;
e to media queries. Her står kun det der ikke er
responsivt, plus reglerne der bruger værdierne.
Et responsivt felt bliver til `--handle`. Andet led i `var()` er hvad
der gælder når feltet står tomt.
#}}
{{ responsive_css }}
--color-bg: {{ bg_color ?? 'var(--gray-600)' }};
{{ if text_color }}
--color-text: {{ text_color }};
{{ /if }}
.media{
max-inline-size: var(--media-width, 100%);
&::after{
position: absolute;
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to var(--background-position, right),
var(--background-opacity, transparent, transparent)
);
}
display: flex;
flex-direction: column;
}
{{ /responsive_css }}
@scope(.{{ class }}) {
:scope {
background-color: var(--primary);
}
.content{
& * + :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--size-100);
}
}
}
</style>
{{ /style_push }}
{{ sve_tw }}
<style>
.relative{position:relative}.py-1000{padding-block:var(--spacing-1000)}.bg-\(--color-bg\){background-color:var(--color-bg)}.text-\(--color-text\){color:var(--color-text)}.z-10{z-index:10}.absolute{position:absolute}.h-full{height:100%}.w-full{width:100%}
</style>
{{ /sve_tw }}
id: q9hN-rOQiuf9cBbqznbBa
text:
-
type: paragraph
content:
-
type: text
marks:
- { type: vizuStyle, attrs: { style: 'text-transform: uppercase; color: var(--quaternary-400);' } }
text: '“Kvalitet kræver viden og godt håndværk!” – Finn Hansen A/S'
-
type: heading
attrs:
level: 1
content:
-
type: text
marks:
- { type: vizuStyle, attrs: { style: 'text-transform: uppercase;' } }
text: 'Vvs firma med over 45 års erfaring'
-
type: paragraph
content:
- type: text
text: 'Hos Finn Hansen A/S udfører vi alle typer opgaver inden for blikkenslager, VVS-installation, ventilation og mindre smedeopgaver.'
settings:
padding:
-
sides:
- top
- bottom
value: 12
custom: false
media_width: 100
background_position: right
background_opacity:
- id: PQttKEs1GmMwsMuDaVV0t
opacity: 50%
type: hero/style_1
enabled: true
links:
- id: LMnoPWOtVo9PG2BLy7gGM
type: link
url: /
text: 'Læs mere om os'
outline: false
_visual_id: 16aae640-29bb-4110-9f8d-7fb982394015
- id: f_qHZTyo9irM8ZCYL9y57
type: link
url: /
text: 'Kontakt os'
outline: false
_visual_id: eab02e74-b9ca-4db5-bfd9-c3f1e8829c88
media: 4a14f33fca7dd650432e376ed7f9e519e7edf24a-2560x1440.jpg
_visual_id: 050cf687-6e3e-4fe4-8f8c-5a09e4990bfd
hero style 1 - Settings 2
<section id="id-{{ id }}" class="[ {{ class }} ] relative py-1000 bg-(--color-bg){{ if text_color }} text-(--color-text){{ /if }}"{{ unless text_color }} data-auto-contrast{{ /unless }} aria-label="{{ if text }}{{ if text | bard_html | contains:h1 }}{{ text | raw | bard_items | where:type:heading | first | bard_text }}{{ endif }}{{ endif }}" {{ visual_edit outline_inside="true" section_orderable="true" }}>
<div class="[ content ] wrapper relative z-10" >
<div class="flow-y flow-space-1-5em prose-p:text-current/80 prose-p:max-w-[75ch]" {{ visual_edit field="blocks" insertable="true" }}>
{{ blocks }}
{{ partial src="blocks/{type}" headline_tag="h1" headline_size="text-800" }}
{{ /blocks }}
</div>
</div>
<div class="[ media ] absolute top-0 right-0 h-full w-full">
{{ if (media | ends_with('.mp4')) }}
<video class="w-full h-full object-cover" loop autoplay muted="true" src="{{ media }}"></video>
{{ else }}
{{ partial:components/picture :imagePath="media" }}
{{ endif }}
</div>
</section>
{{ style_push }}
<style>
{{#
De responsive felter skriver sig selv — tag'et finder dem og laver både
desktop-værdierne og d
display: flex;
display: flex;
e to media queries. Her står kun det der ikke er
responsivt, plus reglerne der bruger værdierne.
Et responsivt felt bliver til `--handle`. Andet led i `var()` er hvad
der gælder når feltet står tomt.
#}}
{{ responsive_css }}
--color-bg: {{ bg_color ?? 'var(--gray-600)' }};
{{ if text_color }}
--color-text: {{ text_color }};
{{ /if }}
.media{
max-inline-size: var(--media-width, 100%);
&::after{
position: absolute;
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to var(--background-position, right),
var(--background-opacity, transparent, transparent)
);
}
display: flex;
flex-direction: column;
}
{{ /responsive_css }}
@scope(.{{ class }}) {
:scope {
background-color: var(--primary);
}
.content{
& * + :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--size-100);
}
}
}
</style>
{{ /style_push }}
{{ sve_tw }}
<style>
.relative{position:relative}.py-1000{padding-block:var(--spacing-1000)}.bg-\(--color-bg\){background-color:var(--color-bg)}.text-\(--color-text\){color:var(--color-text)}.z-10{z-index:10}.absolute{position:absolute}.h-full{height:100%}.w-full{width:100%}
</style>
{{ /sve_tw }}
id: VQN_3YRyoEsMgrTWjQMME
text:
-
type: heading
attrs:
vizuClass: null
vizuBlockStyle: null
level: 1
content:
- type: text
text: 'Dansk '
-
type: text
marks:
- { type: vizuStyle, attrs: { style: 'color: var(--highlighted-color)' } }
text: totalleverandør
- type: text
text: ' inden for værktøjsfremstilling og sprøjtestøbning.'
-
type: paragraph
attrs:
vizuClass: null
vizuBlockStyle: null
content:
- type: text
text: 'Hos '
-
type: text
marks:
- { type: vizuStyle, attrs: { style: 'color: var(--highlighted-color)' } }
text: DENCKER
- type: text
text: ' møder du en løsningsorienteret partner med høj faglighed og fokus på kvalitet og ordentlighed. Vi kombinerer mange års erfaring med den nyeste teknologi og leverer skræddersyede løsninger i topkvalitet – uanset projektets størrelse og kompleksitet.'
links:
- id: 6GDRfTgkJems8p5YScRpl
type: link
url: /
text: 'Book et møde'
outline: false
_visual_id: 8cefdf0a-33fb-4632-bebc-25d60ed04f5b
- id: fJMfeeIYmI9xxpk5W4lMU
type: link
url: /
text: 'Kontakt os'
outline: false
_visual_id: 9815f4b5-03b8-4b4d-88d3-7fcebe7496b9
media: 'Dencker-Profilvideo2025-Final (1) (1).mp4'
settings:
padding:
-
sides:
- top
- bottom
value: 12
custom: false
media_width: 66
background_position: right
background_opacity:
- id: k28UGU86-tXmPQDObyARn
opacity: 0%
- id: fTJwHlWpckQROwFO_Rvrs
opacity: 70%
type: hero/style_1
enabled: true
_visual_id: 0a8211d5-ee1b-451b-9790-6853b7b6ee01