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

CourseTopicBlock / Default (3 Cards)

Standard course topic block with 3 topic cards (1 column mobile, 2 columns tablet, 3 columns desktop)

Layout
Properties
JSON format (e.g., [{"LinkText":"Home","LinkUrl":"/"}])
Component Code
@await Html.PartialAsync("~/Components/Organisms/CourseTopicBlock/CourseTopicBlock.cshtml", new CourseTopicBlockProps
{
"Title": "Course topics",
"Cards": [
{
"Title": "Understanding Breast Cancer",
"Category": "Module 1",
"Description": "Learn about the basics of breast cancer, types, and how it develops",
"DescriptionHtml": null,
"ImageHtml": null,
"CssClass": null,
"HeadingLevel": 3,
"Type": 5,
"LinkText": null,
"LinkUrl": "/course/module-1",
"LinkTarget": null,
"IsActive": false
},
{
"Title": "Treatment Options",
"Category": "Module 2",
"Description": "Explore the various treatment options available and what to expect",
"DescriptionHtml": null,
"ImageHtml": null,
"CssClass": null,
"HeadingLevel": 3,
"Type": 5,
"LinkText": null,
"LinkUrl": "/course/module-2",
"LinkTarget": null,
"IsActive": false
},
{
"Title": "Living with Breast Cancer",
"Category": "Module 3",
"Description": "Practical advice for managing life during and after treatment",
"DescriptionHtml": null,
"ImageHtml": null,
"CssClass": null,
"HeadingLevel": 3,
"Type": 5,
"LinkText": null,
"LinkUrl": "/course/module-3",
"LinkTarget": null,
"IsActive": false
}
]
})
♿ Accessibility