Styleguide
-
Molecules
-
Components
-
Styles
Hero
Description
The hero component is the primary title section of a page. It is almost always used at the top of a page, with at least a `header` passed into it.
Inverted with Only Header
Rendered
Header Test Goes Here
Inverted with Header, Body, and Buttons
Rendered
Header Test Goes Here
The subtitle content goes here. This is an example of some content.
Options
classes:stringheader:stringbody:stringprimary_button:stringprimary_btn_class:string- requires: primary_button=[string]
primary_btn_link:string- requires: primary_button=[string]
primary_btn_data_attributes:string- requires: primary_button=[string]
secondary_button:stringsecondary_btn_class:string- requires: secondary_button=[string]
secondary_btn_link:string- requires: secondary_button=[string]
secondary_btn_data_attributes:string- requires: secondary_button=[string]
lede:stringgithub_button:true | false- Adds the signup button to the hero.
classes:string- The values of this input should represent classes to be applied to the component.
image:string- The value of this input is a link to the image (image path). Becomes the video thumbnail, if used with the video tag.
Inverted with Only Header
Code
{% include components/hero.html classes="inverted" header="Header Test Goes Here" %}
Rendered
Header Test Goes Here
Inverted with Header, Body, and buttons
Code
{% include components/hero.html classes="inverted"
header="Header Test Goes Here"
primary_button="A Primary Btn"
primary_btn_link="/some-destination/"
secondary_button="A Primary Btn"
secondary_btn_link="/some-destination/"
body="The subtitle content goes here. This is an example of some content." %}
Rendered
Header Test Goes Here
The subtitle content goes here. This is an example of some content.