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

StepByStepWrapper / 8 Cards - Clickable Icons with Description

Eight clickable icon cards with descriptions in 4-column grid on desktop

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/StepByStepWrapper/StepByStepWrapper.cshtml", new StepByStepWrapperProps
{
"Heading": "Your breast cancer journey",
"Cards": [
{
"StepNumber": null,
"IconHtml": {},
"Title": "Signs and symptoms",
"Description": "Learn how to check your chest and the signs and symptoms to be aware of.",
"LinkUrl": "/signs-symptoms"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Diagnosis and tests",
"Description": "Understanding the diagnostic process and what tests you may need.",
"LinkUrl": "/diagnosis"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Treatment options",
"Description": "Explore the different treatment approaches available for breast cancer.",
"LinkUrl": "/treatment"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Support services",
"Description": "Find out about the support we can provide throughout your journey.",
"LinkUrl": "/support"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Living with cancer",
"Description": "Practical advice and tips for managing daily life during treatment.",
"LinkUrl": "/living-with-cancer"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Recovery and aftercare",
"Description": "What to expect after treatment and how to manage your recovery.",
"LinkUrl": "/recovery"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Emotional wellbeing",
"Description": "Support for your mental health and emotional wellbeing.",
"LinkUrl": "/emotional-support"
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Get involved",
"Description": "Ways you can support others and make a difference.",
"LinkUrl": "/get-involved"
}
]
})
♿ Accessibility