RazorKit

📖 RazorKit

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

Default Logo Custom URL

▶ 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

▶ 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

▶ 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

▶ 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

CardPersonalStory / Personal Story Card - Long Title

Testing with a longer title text

Layout

Properties