Styleguide

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.

A Primary Btn A Primary Btn

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.

A Primary Btn A Primary Btn