Hero-Custom

Component name: <v-hero-custom>

Se også compositions med config → guide/compositions/hero-custom/

Stort set alt konfigureres via properties i state.heroConfig objektet. Video embed kode samt action på knapperne skal defineres i tilhørende template slot. Se under tabben Code samt i API table nedenfor.

API / customization

Name	Type	Description	Default
:fullscreenMobile	Boolean	Full viewport on mobile (minus header height)	false
:fullHeightDesktop	Boolean	Full viewport-height on desktop (minus header height)	false
:fullWidthDesktop	Boolean	Full viewport-width on desktop (overrules the default max-width style)	false
:textShadow	Boolean	add text-shadow style to text if bg-image has complex colors	false
minHeightDesktop	String	Fixed min-height for desktop e.g. "500" (fullHeightDesktop will overrule this setting)	""
image	Boolean	Show background-image	false
video	Boolean	Show background-video	false
vAlignMobile	String	Align vertically on mobile. Options: top center bottom (Requires fullscreenMobile)	bottom
vAlignDesktop	String	Align vertically on desktop. Options: top center bottom (Requires minHeightDesktop or fullHeightDesktop)	bottom
alignMobile	String	Align horizontally on mobile. Options: left center right	center
alignDesktop	String	Align horizontally on desktop. Options: left center right	left
bgColor	String	Background-color: #ff0000 rgb(100,255,50) etc.	white
useOverlay	Boolean	Add overlay between text and background image/video	false
overlayColor	String	Overlay color: #000000 etc.	black
overlayAlpha	Number	Overlay alpha value: 0.7 etc.	0.5
titleColor	String	Color for the title: #ff0000 rgb(100,255,50) etc.	darkgray
textColor	String	Color for the text: #ff0000 rgb(100,255,50) etc.	darkgray
buttonBgColor	String	Background-color for the first button: #ff0000 rgb(100,255,50) etc.	white
buttonColor	String	Text-color for the first button: #ff0000 rgb(100,255,50) etc.	primary
button2BgColor	String	Background-color for the second button: #ff0000 rgb(100,255,50) etc.	white
button2Color	String	Text-color for the second button: #ff0000 rgb(100,255,50) etc.	primary
:transparentButtons	Boolean	Transparent style for all buttons.	false
titleFontSizeMobile	String	Font-size for the title on mobile e.g. "8" (1-15)	8
titleFontSizeDesktop	String	Font-size for the title on desktop e.g. "12" (1-15)	12
textFontSizeMobile	String	Font-size for the text on mobile e.g. "5" (1-15)	5
textFontSizeDesktop	String	Font-size for the text on desktop e.g. "7" (1-15)	7
buttonSize	String	Button size: default small large	default
titleTextMobile	String	Title text on mobile	-
titleTextDesktop	String	Title text on desktop	-
contentTextMobile	String/v-html	Content multiline text on mobile	-
contentTextDesktop	String/v-html	Content multiline text on desktop	-
imgSrc	String	Background-image mobile e.g. "/assets/image-sm-portrait.webp"	null
imgMdSrc	String	Background-image desktop e.g. "/assets/image-lg-landscape.webp"	null
imgAltText	String	Alt text for (both) background-images: "3f lorem ipsum photo"	""

Bemærk

• Tomme eller fejludfyldte properties på :imgSrc="" bør ikke udskrives i koden, da det vil resultere i en fejlvisning og console fejl. Brug i stedet imgSrc="" (uden kolon) eller :imgSrc="null".
• Anbefalede video indstillinger i Cloudflare (opens new window):
  controls: OFF autoplay: on loop: on preload: on muted: on lazy: on
  For at autoplay virker på mobil, skal videoen være muted.

Frontend Notes: Nice to have i config tool

• Gem konfiguration i Firebase eller lign, så den huskes ved genindlæsning og kan deles. Tilføj en "copy url" knap.