Styleguide
-
Molecules
-
Components
- Auth Modal
- Banner
- Category Filter Menu
- Comparison Table
- Countdown Timer
- Expandable List
- Featured Event
- Flex Cols Img
- Flex Cols
- Form Contact Default
- Hall of Fame List
- Hero
- Ico Three Col
- Ico Two Col
- Info Bullets
- Logo Card Grid
- Logos XS
- Multi Ico List
- One Col
- Resource Thumbnail
- Security Details
- Stepline
- Subnav
- Two Col
-
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
:string
header
:string
body
:string
primary_button
:string
primary_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
:string
secondary_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
:string
github_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.