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. The component can render as either a single column header (the default), or a two column header (by passing `columns='two'`), and will behave differently depending on which option is passed.

One-Col Hero, Inverted with Only Header

Rendered

Header Test Goes Here

One-Col Hero, 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

Two-Col Hero, Inverted with Header, Body, buttons, and image

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

columns : one | two

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.

video : string
The value of this input is the link to the video itself. Can't be used synonymously with the image option. Requires: columns=two

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.

video_title : string
Requires: video=[string]

video_data_attributes : string
Data attributes to be included on the video. Requires: video=[string]

One-Col Hero, Inverted with Only Header

Code

{% include components/hero.html classes="inverted" header="Header Test Goes Here" %}

Rendered

Header Test Goes Here

One-Col Hero, 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

Two-Col Hero, Inverted with Header, Body, buttons, and image

Code

{% include components/hero.html classes="inverted" columns="two" 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/" image="illustrations/illu-worldmap.png" 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