Hero-Custom

Component name: <v-hero-custom>

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

Example

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
vAlign	String	Align the content vertically. Available options: top center bottom (Requires minHeightDesktop or fullscreenMobile or fullHeightDesktop)	center
titleAlign	String	Align the title horizontally available options: left center right	center
textAlign	String	Align the text horizontally available options: left center right	center
buttonsAlign	String	Align the buttons horizontally available options: left center right	center
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"	8
titleFontSizeDesktop	String	Font-size for the title on desktop e.g. "9"	9
textFontSizeMobile	String	Font-size for the text on mobile e.g. "5"	5
textFontSizeDesktop	String	Font-size for the text on desktop e.g. "7"	7
buttonSize	String	Button size: default small large	default
titleText	String	Title text	-
contentText	String/v-html	Content multiline text	-
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

• Mulighed for at tilføje/fjerne knap 2 via konfiguration på komposition-siden.
• Gem konfiguration i Firebase eller lign, så den huskes ved genindlæsning og kan deles. Tilføj en "copy url" knap.