Hero Banner

Please note the changes below based on the Styles we can select. We can show the card, or hide the card and display text, but we cannot have another tile/column control on top of the background image appear with our current set up.

Additionally, we have a A11Y bug that needs to be addressed. Due to the <figurecaption>, screen readers are announcing the word "HAS DETAILS" before it reads the header and paragraph elements. This is on a spreadsheet I am tracking, but is not in Jira yet.

When the image is loading, there is also a default color of light cyan. We'd like the default color to be removed or to display white.

1a. Column control + Background image

Default Static Large Hero View

Note - alignment of card should match the reduced static large hero below.

REQUIREMENT: Remove padding left/right -

@media (min-width: 1024px) {

.static-large-hero-banner .row {

padding: var(--spacing-50) var(--spacing-140);

}

Header added with content tile component

Sub head and header text sizes are hard-coded in CSS based on the hero class.

1b. Column control + Background image

Reduced Static Large Hero View

Header added with text component

Notice the size difference and limitation we have to control in this element

2a. Column control + Background image

Default Static Large Hero View + Background Slide Curve Mask

Header added with text component

Notice the size difference and limitation we have to control in this element

2b. Column control + Background image

Reduced Static Large Hero View + Background Slide Curve Mask

Header added with content tile component

Sub head and header text sizes are hard-coded in CSS based on the hero class.

3a. Column control + Background image

Default Static Large Hero View + Background Slide Curve Mask + Remove Card View

BUG - Card view is not removed on the Default Static Hero. It is being removed correctly on Reduced style (see below)