@magic-modules/hero

this is the @magic-modules Hero component.

embeds a hero module at the top of your page.

installation

npm install @magic-modules/hero

usage

in a page or module View

<Hero state src="/img/hero.jpg"></Hero>

minimal interface

will use state.title and state.description as default values for heading and branding.

<Hero state src="/img/hero.jpg" width="500px" height="300px"></Hero>

renders

@magic-modules/hero

embeds a hero module at the top of your page.

default arguments

@magic tries to keep the default arguments for the Hero sane.

<Hero  state  src="/img/hero.jpg" // hero background image  heading="string"    // fallback: props.heading || state.hero.title || state.title.  branding="string"   // fallback: props.branding || state.hero.branding || state.description.  height="100vh"      // default height, span over full view heigh  width="100vw">      // default width, span over full view width</Hero>

hide heading or branding

you can hide various parts of the hero by setting their prop values to false. if you do not pass title or branding as false, the state.title and state.description variables will be used.

<Hero  state  heading="false"  branding="false"></Hero>

custom size

usually you might want to style the hero using your css.js files,', but, if, as in this page,', you want to instantiate them using dynamic properties,', you can instead pass width and height values to the Hero module.',

<Hero  height="300px"  width="500px"></Hero>

source

the source for this page is in the example directory and gets built and published to github using @magic/core