Responsive
Atoms
▶ AnchorPoint
Default Anchor Point Anchor Point with Long Text H3 Heading Level
▶ BackTo
All Topics All Chapters Long Text Custom Aria Label
▶ Button
Primary Button Element Secondary Button Element Disabled Button Button with Long Text Skip To Main Content Element Print Button Element
▶ ChapterProgress
Chapter 1 of 4 Chapter 3 of 5 Chapter 10 of 10 Chapter 2 of 3
▶ Checkbox
Default Checkbox Checked Checkbox Disabled Checkbox Disabled Checked Long Label
▶ ClearFiltersButton
Default With Form Attributes With Custom Name
▶ DateInput
Default Date Input With Values Error State
▶ DonationRadios
Three Price Points Regular Donation Amounts Custom Amounts
▶ ExternalVideo
YouTube Video YouTube Video with Poster Vimeo Video Vimeo Video with Poster Educational YouTube Video
▶ FileUpload
Default File Upload With Accept Filter Error State
▶ FormErrorMessage
Error Message Success Message
▶ FormFieldError
Default Error with Indicator Error without Indicator Longer Error Message
▶ FormHelpText
Default Help Text Longer Help Text Without ID
▶ FormLabel
Default
▶ InlineLink
Default External Link On Purple Background
▶ Logo
▶ MediaEmbed
Audioboom Embed Audioboom hero Embed Spotify Embed SoundCloud Embed Without Aria Label
▶ QuickLink
Internal Link Internal Link - Long Text External Link External Link - Long Text Short Text Link
▶ RadioGroup
Small - Default Small - Without Help Text Small - Error State Large - Default Large - Without Help Text Large - Error State Required Field With Preselected Option Disabled State Mixed - Some Options Disabled
▶ SearchInput
Default Search Input Search Input with Value Custom Placeholder
▶ Select
Small - Default Small - Without Help Text Small - Error State Large - Default Large - Without Help Text Large - Error State Required Field Disabled State With Preselected Value Multiple Selection With Autocomplete Umbraco Forms - Required with Validation
▶ Switch
Default Switch Switch - Right Selected Donation Type Switch
▶ Tag
Default Tag Selected Tag Long Text Tag Long Text Selected Tag
▶ TextInput
Small - Default Small - With Help Text Small - With Prefix Small - Error State Large - Default Large - With Prefix Large - Error State Required Field Disabled State
▶ Totaliser
Single Result Multiple Results No Results Large Number of Results
Molecules
▶ AccordionItem
Default Accordion Item (Closed) Expanded Accordion Item Long Question Text Rich HTML Content Short Answer
▶ ArticleIntro
Standard Article Introduction Short Introduction Long Introduction Multiple Sentences Real World Example
▶ ArticleMeta
Default Article Meta Without Publish Date Long Read Time Short Read Time
▶ BasketButton
Default State Empty Basket Near Limit High Quantity
▶ Breadcrumb
Two Level Breadcrumb Three Level Breadcrumb (Figma Design) Four Level Breadcrumb Breadcrumb with Long Page Names Single Level (Home Only) Event Category Breadcrumb Custom Mobile Back Link Text Custom Back To Prefix
▶ Card
Default Card Default Card without category Card with Image Card without Link Card with Long Title Card with Long Description Card with Title Only Card with Image and Title
▶ CardArticle
Default (Mobile/Desktop) With Category (Desktop) No Image (Mobile/Desktop) No Image with Category (Mobile/Desktop)
▶ CardEvent
With Image (Desktop) No Image (Desktop) Mobile View
▶ CardEventCourseGroup
With Image (Desktop) No Image (Desktop) Mobile View Minimal Data
▶ CardEventGroup
Default (Desktop) Mobile View Fully Booked
▶ CardFeature
Default Feature Card Feature Card - No Image Feature Card - Long Content
▶ CardHealthCareLink
Health Care Link - Basic Health Care Link - With Description Health Care Link - No Category
▶ CardKeyFact
Key Fact Card - Pink Key Fact Card - Purple Key Fact Card - Light Pink - Split stat Key Fact Card - Short Number Key Fact Card - Short Number Key Fact Card - Long Description
▶ CardPersonalStory
Default Personal Story Card Personal Story Card - No Image Personal Story Card - Long Title Personal Story Card - Short Title
▶ CardProductDownload
Product - In Stock Product - Out of Stock Download
▶ CardStepByStep
Icon - Non-clickable Icon - Clickable Icon - Clickable with Description Numbered - Non-clickable Numbered - Clickable Numbered - Clickable with Description
▶ CardSupport
Basic With External Link Long Title Long Description No Category Grid Layout Example
▶ CardVolunteer
With Image - All Fields Without Image Without Closing Date Minimal Fields Long Title and Description Role and Location Only Various Location Types Urgent Closing Soon
▶ CardWebinar
With Image (Desktop) No Image (Desktop) Long Title Without Host Without Date Minimal (Title Only)
▶ ChapterCard
Internal Link External Link With Order Number Long Title No Link
▶ CheckboxGroup
Large CheckboxGroup (Desktop) Small CheckboxGroup (Mobile) With Pre-selected Options Required Field With Disabled Options
▶ CheckoutCard
Main Site - No Image - Basket Mass Participation - With Image - Basket Main Site - Checkout - No Image Mass Participation - Checkout - With Image Main Site - Order Detail Item - No Image Mass Participation - Order Detail Item - With Image Order Card - View Order Button Order Card - View & Re order Button
▶ ContactDetails
Default
▶ EventDetails
Event details Publication review dates
▶ FeatureSingle
Default Feature Single Default Feature Single with Story PopUp With Two Buttons Primary Button Only Without Category Long Content Minimal Content
▶ Filter
Checkbox Filter - Closed Checkbox Filter - Open Radio Filter - Closed Radio Filter - Open Secondary Variant (Dynamic Label) Without Clear Button
▶ FilterTotaliser
Default with Clear Button Count Only (No Clear Button) Single Result Zero Results Large Result Count Custom Count Format Custom Clear Button Text
▶ FormDonate
Default Form With Price Descriptions
▶ FormSteps
Step 1 Active (No Labels) Step 2 Active (No Labels) Step 3 Active (No Labels) Step 1 Active (With Labels) Step 2 Active (With Labels) Step 3 Active (With Labels) Two Steps
▶ GlossaryTermModal
Default Glossary Term With Find Out More Link Long content
▶ HealthcareInfoCard
Default Healthcare Info Card Long Title Long Description Short Content Title Only
▶ ImageCaption
Standard Image with Caption Image with Long Caption Image with Short Caption Image without Caption Portrait Orientation Image Full Width Image Screen Width Image
▶ ImageZoom
Image with Zoom Enabled Zoomable Image without Caption Zoom with Long Caption
▶ IntroWithHeading
With Heading and Text Heading Only Text Only Long Content Listing Intro
▶ JumpLinks
Default Jump Links Single Link Many Links Custom Heading Long Link Text
▶ KeyInfo
Default Key Info Heading Only With Paragraph Content Long Heading Complex Content
▶ NavLink
Default Nav Link With Dropdown Indicator Active State Button Variant
▶ Pagination
First Page Middle Page Last Page Many Pages Few Pages
▶ PasswordInput
Default (no toggle) With Show Password Toggle With Toggle and Error State With Custom Toggle ID
▶ PersonCard
Manager Card (No Bio) Volunteer Card (With Bio) Without Image Long Name and Title Long Biography
▶ PersonContactCard
Default Person Contact Card Long Email Address Short Name No Title (Edge Case) No Email (Edge Case)
▶ PopularSearches
Three Search Cards Cards Without Images
▶ PopUp
Default PopUp With Longer Title With HTML Content No story link
▶ PromoteCta
Default No Description No Button
▶ PropositionCard
Pink Theme Card Purple Theme Card Minimal Content No Image Long Heading
▶ PublicationDetailCard
Default - In Stock Out of Stock No Longer Available Downloads Only
▶ PublicationProductCard
Default - With Add to Basket With Updated Date Out of Stock No Longer Available Download Only - No Form Minimal - PDF Only Long Content
▶ QuickLinks
Quick Links with Title Quick Links without Title Mixed Internal and External Links Single Quick Link
▶ Quote
Default Quote Quote with Author Role Patient Testimonial Long Inspirational Quote Quote without Author Short Motivational Quote
▶ ResourceDownloadCard
Download Link External Link Internal Link
▶ RichText
Basic Paragraph With Headings With Lists With Blockquote With Links Complex Mixed Content Long Form Content Figma Example Content
▶ SearchCard
Article with Description Research News Press Release Personal Story Forum Thread Without Description Long Title
▶ SidebarDetails
Sidebar detail - Research Project Sidebar detail - Research Grant Sidebar detail - Volunteer Role Sidebar detail - Research Study Role
▶ SidebarMenu
Default Sidebar Menu Custom Heading Single Link Many Links Long Link Text Default Heading (no heading prop)
▶ StoryCard
Default Story Card Story Card with Long Content Story Card - Title Only
▶ SupportCta
Standard - Pink Theme Standard - Cream Theme Standard - Purple Theme Standard - With Icon Standard - Long Content Contact Us - Pink Theme Contact Us - Cream Theme Contact Us - Purple Theme Contact Us - With Icon Contact Us - Long Content Standard - Compact Modifier Image - Pink Theme Image - Cream Theme Image - Purple Theme Image - Long Content
▶ TextArea
Default TextArea With Value Error State
▶ TotaliserWithClearFilters
Totaliser Only Totaliser with Clear Filters Single Result with Clear With Form Attributes Large Number of Results
▶ Video
YouTube Video with Poster YouTube Video without Poster Vimeo Video with Poster Video with Long Description Video with Minimal Content Video with Custom Accessibility Label
▶ VideoFullWidth
Full Content with YouTube YouTube Video Example Vimeo Video Example Title Only Long Text Content Video Without Poster
Organisms
▶ Accordion
Default Accordion Single Item Many Items With Long Title Mixed Content Length Without Title
▶ AnchorBlock
Default Anchor Block Without CTA Button
▶ ArticleCta
Pink Variant Purple Variant Light Pink Variant (White) Afternoon tea Wear It Pink
▶ CardListing
Four Volunteer Cards Eight Volunteer Cards With Call to Action Empty State
▶ Carousel
Default Cards with Images Default Cards with Images on pink Key Fact Cards Key Fact Cards on pink Event Cards Event Cards on pink Signpost block Signpost block on pink Personal Stories Personal Stories on pink Three Items Two Items One Item Without CTA Button
▶ CheckoutCards
Basket State - Mixed Items Confirmation State - Order Review Order History - Past Orders Mixed State - With Language Variant
▶ CourseTopicBlock
Default (3 Cards) Multiple Rows (6 Cards) Varied Content Lengths Without Title
▶ DonationBlock
Complete Donation Block Donation block no image With PopUp Story
▶ FeaturedBlock
3 Cards with Images (Pink Background) 3 Cards with Images (Cream Background) 2 Cards (Cream Background) 4 Cards (Cream Background) 5 Cards (Cream Background) 3 Cards without Images (Cream Background) 3 Cards without Images (Cream Background) Without Call-to-Action Button Without Title (H2 Card Headings)
▶ FeatureSingleBlock
Default Feature Single Block Fundraising Event Support Services Research Impact Volunteer Opportunity Minimal Content With PopUp Story
▶ FeedbackForm
Initial State Expanded State Pink Background Purple Background Expanded with Pre-selected Options Custom Text
▶ Footer
Default Footer - Complete Footer with Standard Links Only Footer with CTA Block
▶ FormBlock
Default (Cream Background) White Background Pink Background
▶ Gallery
Default Gallery Gallery without Subheading Minimal Gallery Large Image Set
▶ Header
Default Header Without Search
▶ HeaderMinimal
Default
▶ HealthInformationCards
Default Health Information Cards Single Card Many Cards
▶ HeroArticle
Default Article Hero Without Breadcrumb Without Image Without Tag Tag Without Colon Long Title Minimal Content
▶ HeroDfd
Full Hero with Image Hero without Image Minimal Hero Hero without Jump Links Hero without Contact Details
▶ HeroFullImage
No Background with Breadcrumb Light Pink with Breadcrumb Light Pink (No Breadcrumb) Pink (No Breadcrumb) Purple (No Breadcrumb) With PopUp Story Light Pink with Breadcrumb and Story PopUp
▶ HeroFullImageWithHeader
Light Pink Hero with Breadcrumb Pink Hero (No Breadcrumb) Purple Hero with Breadcrumb No Background with Breadcrumb Light Pink Hero with Breadcrumb and Story Pop Up
▶ HeroManager
Default Manager Hero Without Breadcrumb Without Image Without Tag Without Role Long Bio Minimal Content
▶ HeroPink
Title Only Eyebrow, Title and Text Eyebrow, Title, Text with Background Pattern Full Content with Image Full Content (Event Version) Full Content with BG Pattern (Event Version) Afternoon Tea Microsite (Pattern + Biscuit) Wear it Pink (With Border) With Border (No Breadcrumb) With Donation Block With PopUp
▶ HeroPinkWithHeaderAfternoonTeaBreadcrumbNoImage
Afternoon Tea - Simple (With Breadcrumb, No Image) Afternoon Tea - Biscuit Only (With Breadcrumb, No Image) Afternoon Tea - Full Content (With Breadcrumb, No Image) Afternoon Tea - Heading Only (With Breadcrumb, No Image)
▶ HeroPinkWithHeaderAfternoonTeaNoBreadcrumbImage
Afternoon Tea - Simple (No Breadcrumb) Afternoon Tea - Biscuit Only (No Breadcrumb) Afternoon Tea - Compact (No Breadcrumb) Afternoon Tea - Full Content (No Breadcrumb) Afternoon Tea - Heading Only (No Breadcrumb, With Image)
▶ HeroPinkWithHeaderAfternoonTeaNoBreadcrumbNoImage
Afternoon Tea - Simple (No Breadcrumb, No Image) Afternoon Tea - Biscuit Only (No Breadcrumb, No Image) Afternoon Tea - Full Content (No Breadcrumb, No Image) Afternoon Tea - Heading Only (No Breadcrumb, No Image)
▶ HeroPinkWithHeaderBreadcrumbNoImage
Title Only with Breadcrumb Eyebrow, Title and Text Full Content - No Image With Donation Block - No Image With Pop-Up Modal - No Image
▶ HeroPinkWithHeaderNoBreadcrumbImage
Full Content - No Breadcrumb With Donation Block - No Breadcrumb With Pop-Up Modal - No Breadcrumb
▶ HeroPinkWithHeaderNoBreadcrumbNoImage
Title Only - No Breadcrumb Full Content - No Breadcrumb, No Image With Donation Block - No Breadcrumb, No Image With Pop-Up Modal - No Breadcrumb, No Image
▶ HeroPinkWithHeaderWearItPinkBreadcrumbNoImage
Wear it Pink - Simple (With Breadcrumb, No Image) Wear it Pink - Full Content (With Breadcrumb, No Image) Wear it Pink - Donation Block (With Breadcrumb, No Image)
▶ HeroPinkWithHeaderWearItPinkNoBreadcrumbImage
Wear it Pink - Simple (No Breadcrumb) Wear it Pink - Compact (No Breadcrumb) Wear it Pink - Full Content (No Breadcrumb) Wear it Pink - Donation Block (No Breadcrumb)
▶ HeroPinkWithHeaderWearItPinkNoBreadcrumbNoImage
Wear it Pink - Simple (No Breadcrumb, No Image) Wear it Pink - Full Content (No Breadcrumb, No Image) Wear it Pink - Donation Block (No Breadcrumb, No Image)
▶ HeroVolunteer
Full Content with All Fields Without Image Minimal Content (Name Only) Long Treatment and Experience Lists Without Label Tag Treatments List Only Experiences List Only
▶ HorizontalFilters
Tags & Filters - Open (Desktop) Tags & Filters - Closed (Mobile) Mobile - Filters Open Filters Only (No Tags) With Active Filters Tags Only (No Filter Dropdowns)
▶ JustGivingBlock
Just Giving Block Just Giving Block - No Footer Just Giving Block - No Title
▶ MediaBlock
Audioboom Hero Audio Embed
▶ PersonBlock
Managers (Pink Background) Volunteers (Light Pink Background)
▶ PullQuote
Pull Quote Pull Quote - Author Only Pull Quote - Long Text Pull Quote - Short Text
▶ QualityAssuranceCard
Default Quality Assurance Card Without Content Minimal Content Long Heading Long Content
▶ QuoteWithImage
Quote with Image Purple Quote with Image Pink Quote with Image Light Pink Quote without Image
▶ ResourceDownloadBlock
Mixed Link Types Download Links Only Single Resource Card Long Content Stress Test
▶ RichTextBlock
Default - Content Only With Bookmark Sidebar With Donation Widget With Both Sidebars With Glossary Terms Fully Populated - All Properties
▶ ServicesGroupFinderBlock
With Results No Results
▶ SideFilters
Desktop View Mobile - Closed Mobile - Open With Selected Filters Single Filter Group
▼ StepByStepWrapper
2 Cards - Non-clickable (50/50 Layout) 3 Cards - Numbered (3 Column Layout) 4 Cards - Icons (4 Column Layout) 4 Cards - Clickable with Description 8 Cards - Non-clickable Icons 8 Cards - Clickable Icons with Description
▶ StoryCarousel
Three Stories or Less More Than Three Stories Without CTA Button Custom Heading
▶ SupportCards
Default (4 Cards) Mixed Content Without Heading
▶ SupportCtaBlock
Two Cards - Pink and Cream Two Cards - With Contact Us Three Cards - All Themes Three Cards - With Icons Two Cards With Image Promo Three Cards With Two Image Promos
▶ VideoBlock
Default Video Block With Custom Poster Vimeo Video Without Description
▶ VideoFullWidthBlock
Default Video Full Width Block YouTube Video Example Vimeo Video Example Title Only Long Text Content Video Without Poster

StepByStepWrapper / 4 Cards - Icons (4 Column Layout)

Four icon cards 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": "We\u0027ll support you all the way",
"Cards": [
{
"StepNumber": null,
"IconHtml": {},
"Title": "Breast Cancer Now technical t-shirt",
"Description": null,
"LinkUrl": null
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Breast Cancer Now technical t-shirt",
"Description": null,
"LinkUrl": null
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Breast Cancer Now technical t-shirt",
"Description": null,
"LinkUrl": null
},
{
"StepNumber": null,
"IconHtml": {},
"Title": "Breast Cancer Now technical t-shirt",
"Description": null,
"LinkUrl": null
}
]
})
♿ Accessibility ▶