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

HeroDfd / Full Hero with Image

Complete hero with all elements: breadcrumb, category, title, subtitle, intro, jump links, CTA, image, and contact details

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/HeroDfd/HeroDfd.cshtml", new HeroDfdProps
{
"Breadcrumb": {
"Items": [
{
"Name": "Home",
"Url": "/"
},
{
"Name": "Get involved",
"Url": "/get-involved"
}
],
"MobileBackLinkText": "Back to Get involved",
"BackToPrefix": "Back to ",
"Variant": ""
},
"Category": "Fundraising",
"Title": "Walk the Walk",
"Subtitle": "Join us for an unforgettable experience",
"IntroCopy": "This summer, you changed the future for people affected by breast cancer.",
"JumpLinks": [
{
"Text": "Why take part",
"Url": "#why-take-part"
},
{
"Text": "How it works",
"Url": "#how-it-works"
},
{
"Text": "What to expect",
"Url": "#what-to-expect"
},
{
"Text": "Sign up today",
"Url": "#sign-up-today"
},
{
"Text": "Fundraising tips",
"Url": "#fundraising-tips"
},
{
"Text": "FAQs",
"Url": "#faqs"
},
{
"Text": "Contact us",
"Url": "#contact-us"
},
{
"Text": "Terms and conditions",
"Url": "#terms"
}
],
"CtaButton": {
"Variant": "primary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Book a group",
"LinkUrl": "/book-group",
"LinkTarget": null,
"IsActive": false
},
"ImageHtml": {},
"ContactDetails": {
"Theme": "pink",
"PhoneNumber": null,
"OperatingTimes": null
},
"CtaStickyOnMobile": false
})
♿ Accessibility