hero component cleanup

[flacoman91]

Addresses: #596

Hero work:

• aligned with cfpb heroes pattern docs
• dropped headingLevel subheadingLevel textColor props
• heading and subheading typed as strings
• use DSR Heading type 1 with m-hero__heading not raw h1
• subheading still p.m-hero__subhead
• root is section not div
• backgroundColor on wrapper normally, on section for knockout
• fixed useBackgroundImage clearing wrapper backgroundColor
• HeroProperties omits children and color from html attrs
• only render heading/subheading when provided
• Added mobileImage option for photograph heroes
• updated stories to point to images from DS github page

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-05-29 03:14 UTC

[natalia-fitzgerald]

@flacoman91

For heading description change text to:

Content guidelines for heading: One-line (at largest breakpoint): 41 characters maximum; Two-lines (at largest breakpoint): 82 characters maximum

Or we can link to the content guidelines contained in the CFPB Design System component page here: https://cfpb.github.io/design-system/patterns/heroes#headings

For subheading description change text to:

Content guidelines for subheading: After one-line heading, subheading text can be between 165 and 186 characters (three lines at largest breakpoint); After two-line heading, subheading text can be between 108 and 124 characters (two lines at largest breakpoint)

Or we can link to the content guidelines contained in the CFPB Design System component page here: https://cfpb.github.io/design-system/patterns/heroes#subheadings

For IsKnockout description change text to:

• When using a dark background, add the m-hero--knockout to switch the text to white.

[flacoman91]

Is this related #191

[natalia-fitzgerald]

@flacoman91 - It appears that @meissadia was trying to identify the implemented use cases for each hero configuration. I think we can close #191 since it is labeled as discovery.

[natalia-fitzgerald]

@flacoman91
For the full bleed hero can you use the image that can be found here: https://www.consumerfinance.gov/data-research/consumer-credit-trends?

[natalia-fitzgerald]

@flacoman91
According to DS documentation for hero with photo (see "Hero with photo - See details - Specs) https://cfpb.github.io/design-system/patterns/heroes#hero-with-photograph-1 providing a separate image for mobile is not optional, it is mandatory. "Two images must be created, one for large and one for small screens." Can we present it in the DSR as such rather than suggesting the mobile image is optional?

[flacoman91]

@flacoman91 According to DS documentation for hero with photo (see "Hero with photo - See details - Specs) https://cfpb.github.io/design-system/patterns/heroes#hero-with-photograph-1 providing a separate image for mobile is not optional, it is mandatory. "Two images must be created, one for large and one for small screens." Can we present it in the DSR as such rather than suggesting the mobile image is optional?

done here: f96a259

[natalia-fitzgerald]

Looks great @flacoman91!