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

FeatureSingle / Default Feature Single with Story PopUp

Complete feature single with all content and Story PopUp

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":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Molecules/FeatureSingle/FeatureSingle.cshtml", new FeatureSingleProps
{
"ImageHtml": {},
"Category": "Category",
"Title": "Take on the Pink Ribbon Walk",
"Subtitle": "Join thousands walking to fund life-changing breast cancer research.",
"PrimaryButton": {
"Variant": "primary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Pay in your fundraising",
"LinkUrl": "#",
"LinkTarget": null,
"IsActive": false
},
"SecondaryButton": {
"Variant": "secondary",
"Type": null,
"Disabled": false,
"AriaLabel": null,
"Name": null,
"Value": null,
"Action": null,
"LinkText": "Second button",
"LinkUrl": "#",
"LinkTarget": null,
"IsActive": false
},
"PopUp": {
"Title": "Kreena\u0027s story",
"Content": "Kreena was diagnosed with breast cancer and found support through Breast Cancer Now. Her journey inspired her to help others facing similar challenges through fundraising and advocacy.",
"AriaLabel": null,
"LinkText": "Read full story",
"LinkUrl": "/stories/kreena",
"LinkTarget": null,
"IsActive": false
}
})
♿ Accessibility