Variant 1 : Default/Primary/Primary H1
- Can have 1 image and 2 Text Fields, the Supplemental Headline and Headline are styled according to the style guide.
- The Headline can either be an H1 or H2 Heading.
- Default and Primary Hero have an H2 Heading as a default.
Name: Hero
Variant: Default/Primary/Primary h1
Bootstrap: col-12
Classes: none
Variant 2 : Primary - Narrow/Primary - Narrow H1
- Can have 1 image and 2 Text Fields, the Supplemental Headline and Headline are styled according to the style guide.
- The Headline can either be an H1 or H2 Heading.
- Primary - Narrow Hero has an H2 Heading as a default.
Name: Hero
Variant: Primary - Narrow/Primary - Narrow h1
Bootstrap: col-12
Classes: none
Variant 3 : Overlay/Overlay H1
- Can have 1 image, 1 Link, and 3 Text Fields, the Supplemental Headline and Headline are styled according to the style guide while the additional text field is rich text to add freedom to the content author.
- The Headline can either be an H1 or H2 Heading.
- The Link on the heroes should be styled as a primary link.
- Overlay Hero has an H2 Heading as a default.
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--no-curve
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--external
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--external link-primary--no-curve
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--block
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--block link-primary--text-left
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--block link-primary--no-curve
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--block link-primary--no-curve link-primary--text-left
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--alt-highlight
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--alt-highlight link-primary--no-curve
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--no-curve
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block link-primary--text-left
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block link-primary--no-curve
Name: Hero
Variant: Overlay/Overlay h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block link-primary--no-curve link-primary--text-left
Variant 4 : Overlay - Narrow/Overlay - Narrow H1
- Can have 1 image, 1 Link, and 2 Text Fields, the Supplemental Headline and Headline are styled according to the style guide.
- The Headline can either be an H1 or H2 Heading.
- The Link on the heroes should be styled as a primary link.
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--no-curve
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--external
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--external link-primary--no-curve
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--block
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--block link-primary--text-left
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--block link-primary--no-curve
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--block link-primary--no-curve link-primary--text-left
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--alt-highlight
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--alt-highlight link-primary--no-curve
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--no-curve
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block link-primary--text-left
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block link-primary--no-curve
Name: Hero
Variant: Overlay - Narrow/Overlay - Narrow h1
Bootstrap: col-12
Classes: link-primary link-primary--light-gray link-primary--block link-primary--no-curve link-primary--text-left