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

HeroPink / Full Content (Event Version)

Event hero with date label, image, and two buttons

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":"/"}])
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/HeroPink/HeroPink.cshtml", new HeroPinkProps
{
"Label": "Afternoon tea | August 2025",
"Heading": "Raise a cuppa. Raise money. Raise hope.",
"IntroText": "This summer, you changed the future for people affected by breast cancer.",
"Breadcrumb": {
"Items": [
{
"Name": "Home",
"Url": "/"
},
{
"Name": "Grandparent",
"Url": "/grandparent"
},
{
"Name": "Parent",
"Url": "/grandparent/parent"
}
],
"MobileBackLinkText": null,
"BackToPrefix": "Back to ",
"Variant": ""
},
"PrimaryButton": {
"Variant": "primary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Pay in your fundraising",
"LinkUrl": "/fundraising/pay-in",
"LinkTarget": null,
"IsActive": false
},
"SecondaryButton": {
"Variant": "secondary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Second button",
"LinkUrl": "/about",
"LinkTarget": null,
"IsActive": false
},
"ImageHtml": {},
"ShowBackgroundPattern": false,
"ShowBorder": false,
"DonationForm": null,
"ShowBiscuit": false,
"PopUp": null
})
♿ Accessibility