Component Showcase

This page demonstrates all available content blocks and typography styles for the Information Page template. Use this as a reference when building new pages.

Note: Each component is labelled with its block type name as it appears in the CMS.

Typography & Text Styles

This section demonstrates all typography styles available in the rich text editor.

Heading 2 (H2) - Gramatika Bold 40px/48px

H2 headings are used for main section titles. They use Gramatika Bold at 40px with 48px line height, in LC Blue (#1E22AA).

Heading 3 (H3) - Gramatika Bold 24px/32px

H3 headings are used for subsections within a main section. They use Gramatika Bold at 24px with 32px line height.

Heading 4 (H4) - Gramatika Bold 20px/28px

H4 headings are used for smaller subsections or sidebar titles. They use Gramatika Bold at 20px with 28px line height.

Body Text (this paragraph) uses Nunito Sans Regular at 19px with 28px line height. This is the default text style for all paragraph content.

Text can be bold, italic, or bold and italic combined.

Links look like this example link - they are LC Blue and underlined.

Lists (Bullet & Numbered)

Lists are created using the rich text editor toolbar.

Unordered List (Bullets):

  • First bullet point item
  • Second bullet point item
  • Third bullet point item with longer text to show how wrapping works when content extends beyond one line

Ordered List (Numbers):

  1. First numbered item
  2. Second numbered item
  3. Third numbered item

Divider Block

Block Type: divider

A simple horizontal line used to separate content sections. It has no configurable options - just add it between blocks where you need visual separation.

Section Block

Block Type: section

The Section Block is the most commonly used block. It contains:

  • Heading - Displayed as H2 (appears in sidebar navigation)
  • Content - Can contain paragraphs, blockquotes, buttons, images, accordions, and more

Use Section Blocks to organize your page into logical sections. Each section heading automatically appears in the "In this section" sidebar navigation.

Border Box Block

Block Type: border_box

The Border Box has a 6px rose/magenta left border (#C429A5). Use it to highlight key features, benefits, or important information that should stand out.

Contains:

  • Optional heading (H2)
  • Paragraphs and/or Checklists

Border Box Block with Checklist (Tick Style)

Block Type: border_box with checklist (tick style)

This example shows a Border Box containing a checklist with tick icons:

  • First checklist item with tick icon
  • Second checklist item with tick icon
  • Third checklist item - use for positive items, features, or benefits

Box Block (Content Box)

Block Type: box

The Box Block has a 1px grey border (#D9D9D9) with 8px rounded corners and 24px padding. Use it for grouped content like eligibility criteria, examples, or categorized information.

Contains:

  • Optional heading (H2)
  • Paragraphs and/or Checklists

Box Block with Checklist (Tick Style)

Block Type: box with checklist (tick style)

  • Eligible situation example one
  • Eligible situation example two
  • Eligible situation example three
  • Use tick style for positive/included items

Box Block with Checklist (Cross Style)

Block Type: box with checklist (cross style)

  • Not covered example one
  • Not covered example two
  • Not covered example three
  • Use cross style for negative/excluded items

Standalone Checklist Block

Block Type: checklist (standalone, from about_blocks)

This checklist appears outside of a Box or Border Box. It has a rose left border by default.

  • Standalone checklist item one
  • Standalone checklist item two
  • Standalone checklist item three

Quote Block (Blockquote)

Block Type: blockquote

The Quote Block displays a styled quotation with a 4px rose left border. Quote text is 24px/32px in LC Rose colour.

This is an example quote. Use it for testimonials, pull quotes, or highlighting important statements from your content.

— Attribution Name (optional)

Button Block

Block Type: button

Buttons can link to internal pages, external URLs, or documents. External links show an arrow icon.

Primary Button (Blue):

Primary Button (External Link)

Secondary Button (Yellow):

Secondary Button (External Link)

Captioned Image Block

Block Type: captioned_image

Displays an image with an optional caption. The caption appears centered below the image at 16px with 75% opacity.

Fields:

  • Image (required)
  • Alt text (optional - uses image's default if blank)
  • Caption (optional)

Note: No image is loaded in this demo - add an image via the CMS to see the full effect.

Video Block

Block Type: video

Embeds a video from YouTube or Vimeo. Just paste the video URL and Wagtail handles the embed automatically.

Fields:

  • Video URL (YouTube or Vimeo link)
  • Placeholder image (optional - shown before video loads)

Accordion Block (FAQ)

Block Type: accordion

Expandable FAQ-style accordions. Each item has a question (always visible) and an answer (revealed on click). The header is LC Blue with white text.

Fields per item:

  • Question (shown in blue header)
  • Answer (can contain paragraphs, images, videos)
This is Accordion Item 1 - Click to expand

This is the answer content for accordion item 1. It can contain rich text with bold, italic, links, and lists.

This is Accordion Item 2 - Click to expand

This is the answer content for accordion item 2. You can add multiple paragraphs.

Like this second paragraph.

This is Accordion Item 3 - With a list in the answer

Accordion answers can contain lists:

  • List item one
  • List item two
  • List item three
This is Accordion Item 4 - With a list with a image
  1. List item one
  2. List item two
  3. List item three
Thinking icon: a person scratching their head. There is a thought bubble above them.
This is Accordion Item 4 - With a Video

CTA Block (Call to Action)

Block Type: cta

A Call to Action block for promoting actions or linking to key pages. Can use a reusable CTA snippet or custom content.

Fields:

  • CTA Snippet (optional - use a pre-defined snippet)
  • Heading
  • Description
  • Link (internal page or external URL)

This is the CTA Block Heading

This is the CTA description text. Use it to encourage users to take an action.

CTA Button Text

Icon Image Text Block

Block Type: icon_image_text

Displays one or more icon images alongside text content. Icons can be positioned left or right.

Fields:

  • Icon position (left or right)
  • Icons (list of icon image + text pairs)

Note: Add icons via the CMS to see this block in action.

Statistics Block

Block Type: statistics

Displays 3 statistics snippets in a row. Statistics must be created as Snippets first, then selected here.

Fields:

  • Heading (section title)
  • Statistics (exactly 3 statistic snippets)

Note: Create Statistic snippets in the Snippets menu, then add this block.

Colour Palette Reference

The Leukaemia Care brand colours used throughout the site:

  • LC Blue - #1E22AA - Primary brand colour, used for headings, links, buttons
  • LC Rose - #C429A5 - Accent colour, used for borders, highlights, quotes
  • LC Yellow - #FFDC47 - Secondary button colour, highlights
  • LC Graphite - #222222 - Body text colour
  • LC Graphite 25% - #BDBDBD - Divider lines, subtle borders

Fonts:

  • Gramatika Bold - Headings (H1, H2, H3, H4), buttons
  • Nunito Sans - Body text, lists, captions

Sidebar Navigation

Feature: "In this section" sidebar

The sidebar on the right (desktop) or top (mobile) automatically generates navigation links from all H2 headings on the page.

How it works:

  • Each Section Block, Border Box, and Box Block heading appears in the sidebar
  • Clicking a link smoothly scrolls to that section
  • The current section is highlighted as you scroll
  • Sidebar is sticky on desktop (stays visible while scrolling)

To enable: Check "Show sidebar" in the page settings and add a Table of Contents block to the sidebar content.

Related Topics

About Leukaemia

Test Forms

Need help understanding this information?

Our support team is here to answer your questions and provide guidance.

Contact Support

Subscribe today

Subscribe to receive news, updates and ways to support our work from Leukaemia Care. By subscribing, you agree to receive emails from us. You can unsubscribe at any time. Read our privacy policy.