Features a full-width image (light or dark) with superimposed text (light or dark contrasting). See a demo page with a site header.
Do
Use on home pages and landing pages with multiple child pages.
When used on pages other than Home Pages or Section Landing Pages, the headline (H1) must be the page title.
Include a title/headline (required), a description (optional), and call-to-action link button(s) (optional).
Ensure that images clearly communicate the concept across all breakpoints and that critical information is not cropped out.
Do Not
Use more than ONE Hero on a page.
Toggle Component Options
Striving for sustainability is just smart business
Labeling Expectations
Use a unique `id=""` on the title.
Use a unique `id=""` on the action link button(s).
Use `aria-labelledby=""` on the link buttons referencing the id of the link button(s) and the id of the title.
Keyboard Expectations
When you TAB into the `Hero` component, focus will go onto the link button(s).
Resources
Theme Black to Gray-Darker Blue-Dark to Blue Blue to Teal-Darker Green-Dark to Green Blue-Dark to Green-Dark Green-Dark to Blue-Dark Gray-Light to white Gray-Light to Gray-Lighter Teal-Light to Teal-Lighter Image Business Solar Chef Family Landscape One Person Store Solar Solar Cell Two Person Store Content Content 1 Content 2 Content 3 Too Much Content Action No Actions Primary Action Primary and Secondary Action
/info/unindexed/dpa-conversion-business
The Image Slideshow component seems to have shrunk after JSS conversion. See it here: https://scprod-cms.duke-energy.com/info/unindexed/dpa-conversion-business, compared to pre-JSS: https://scdev28.duke-energy.com/info/unindexed/dpa-conversion-business. As you can see, it cuts off some of the image space and the description underneath is completely gone.