Hero

Component name: <v-hero>

Examples

Standard

Blur

With extra blur to improve text readability on noisy background images.

Split

Split with video

Minimal

Slider

When using the slider, please notice that the height is decided by the highest v-hero slide

Hero slider API

Name	Type	Description	Default
auto	Boolean	Whether or not the slider should automatically switch between slides on a 5 sec inteval	false
slide-interval	Number	The interval for auto rotate in ms, does nothing if auto is false	5000

Hero API

Name	Type	Description	Default
img-src	String	Adds an image to the hero. Valid value: Image URL	-
img-md-src	String	A breakpoint and pixel-density specific version of img-src	-
alt	String	The alt text for the image	image
img-align	String	Sets the image alignment. Valid value: Any background-position property	center
auto-height	Boolean	Will make the hero height automatically adjust to the content.	false
small	Boolean	Small size	false
blur	Boolean	Blur variant	false
split	Boolean	Split variant	false
video	Boolean	Split variant with video. Must be used together with split.	false
minimal	Boolean	Minimal variant	false