Responsive
Atoms
FormLabel
Default
Molecules
ContactDetails
Default
Organisms
HeaderMinimal
Default
ServicesGroupFinderBlock
With Results No Results

HeroFullImage / With PopUp Story

Hero with expandable popup story component

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/HeroFullImage/HeroFullImage.cshtml", new HeroFullImageProps
{
"Heading": "SUPPORT LIFE-SAVING RESEARCH",
"IntroText": "Every donation helps fund groundbreaking breast cancer research. Read how your support changes lives.",
"BackgroundImageHtml": {},
"PrimaryButton": {
"Variant": "primary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Donate now",
"LinkUrl": "/donate",
"LinkTarget": null,
"IsActive": false
},
"SecondaryButton": {
"Variant": "secondary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Learn more",
"LinkUrl": "/research",
"LinkTarget": null,
"IsActive": false
},
"Variant": "none",
"Breadcrumb": null,
"PopUp": {
"Title": "Sarah\u0027s story",
"Content": "After her diagnosis, Sarah connected with other survivors through our support services. She now volunteers to help newly diagnosed patients navigate their treatment options.",
"AriaLabel": null,
"LinkText": "Read Sarah\u0027s full story",
"LinkUrl": "/stories/sarah",
"LinkTarget": null,
"IsActive": false
}
})
♿ Accessibility