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

StepByStepWrapper / 4 Cards - Clickable with Description

Four clickable cards with descriptions and chevron arrows

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/StepByStepWrapper/StepByStepWrapper.cshtml", new StepByStepWrapperProps
{
"Heading": "We\u0027ll support you all the way",
"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"
}
]
})
♿ Accessibility