Herospace for Demo Component Page

Hi Team,

Welcome to the Demo Component Type Page with Table of Contents. This page will display the variety of component types and have explanations of how to use each, what options to adjust, and more.

This is a Rich Text Editor. 

When editing, you will see tabs for:

• Header (the title you see above)
• Content (this information)
• Footer (which is really a button)
• Design Options

In the main content area, you'll be able to style content in a few ways.

1. This is a numbered list
2. Above was a bulleted list.
3. You can add hyperlinks.

You can also style items like the pull quote below:

MS Canada is a great organization to work for. Your colleagues are smart and the work is important.

Additionally, you have the option to make copy a button. You first have to write a string of copy. Then make that a hyperlink. Then you highlight the hyperlink and in the "Style" dropdown you can click on "buttonize link."

Here is an example button.

Finally, you have the option to do standard rich text styling like add different sized headings and bold or italicize your copy.

Heading 2 is a good for titles.

Heading 3 for subtitles.

Heading 4 for section call outs.

Heading 5 for smaller section call outs.

Heading 6 is just a step above standard copy. 

Headings do have an implication on SEO and Accessibility. You want to make sure you're using them in an ordered, appropriate way.

Below you will see 3 examples of Info Blocks. These components have a handful of options so I wanted to show a variety of displays for these components. Within each Info Block, the copy will explain the changes.

This next component is Related Links Wrapper - Curated. These display as four blocks with different colors. You can choose four internal links to connect to that fit the tone/user journey of the page you're creating.

You will have the option to have the short description show or not show. The following Related Links Wrapper - Curated has short descriptions turned off.

This next Related Links Wrapper - Curated shows short descriptions. 

We recommend showing the short description show when you have content that needs extra clarification. 

• Where is the user going? 
• The short description dynamically pulls from the internal resource's TEASER section. 
• It is not editable within the component. 
• If you want the short description to show, you should go to the page you are linking to, and make sure the short description under the Teaser tab is correct.

This next component is a Related Links Wrapper - Automatic. These will display as four blocks with different colors. It will automatically link to internal resources based on the area designated for this page.

This next component is a Promo Block. These are great for CTAs, linking to webinars, resources, events, and other relevant content that you want to highlight or encourage your visitors to use.

This next component is a testimonial. Use these to add a human element to your content and further the feeling of community you are trying to bring to your online ecosystem.

• You have the option to at as many as you like. We recommend sticking to either 1 or 3 in a slider. The first example below has 1, the second has 3 in a slider.
• We recommend keeping the image to the left, even though you have the option to have it to the right. If you are doing a slider, definitely keep the image on the same side on all of the slides.
• You do not need to include quotation marks in the Quote field.

Below you can see a Media element incorporated into the content. This is a YouTube video.

Below you can see a Media element incorporated into the content. This is an image. You can always use RTEs (like this one) to explain images or add context to your media elements.

The next section shows components you have available. These elements are reusable. They are NOT created on an individual page. You must go to Content > Paragraphs to create a new Reusable Component. (Paragraphs is a legacy term in web development. Paragraphs = Blocks = Components). 

Once you create a Reusable Component you can place that same component on multiple pages. If you edit it, it will update across all the pages you've placed it on. A good use case is a Promo - you can create a promo for a campaign, leave it be for a month while the campaign is running, then update it to a new campaign - it will update across all the pages.

At the moment (Feb 2026), the main From Library component you will want to incorporate on pages is the Donation component. Below, I placed it on the page, but I cannot edit the copy or link of the Donate button.

The following component is the Carousel Promo (default).

Items:

• Choose Carousel Embed (dynamic).
  • Adjust Visible Cards to 2 (when there is a TOC), leave at 3 without a TOC.
  • No need to adjust "Slide Change Delay"
• Select Upcoming Events Promo Carousel
  • Display "Carousel Embed (grid) USE THIS ONE
  • No Advanced Options

Header:

• You will need to add special code to "Source." Click to edit this component and copy/paste the code into the header section.

Footer:

• Add a link to Community Events.
• Link title: SEE ALL COMMUNITY EVENTS

Design Options (devs only)

• Change background to Alternative Background Color
• Add Block Class events-carousel

We have a few additional components and styling elements coming soon.

1. Stat Cards: These will be a subtype of Curated Cards. We will use them for sharing statistics throughout the site.
2. Accordions: These will be used for Frequently Asked Questions.
3. Highlights: These are purely a styling element to allow for extra content design. We recommend using them to call out important content or using them to break up long stretches of copy.
4. Tan Cards: These will allow for content to be broken up into smaller chunks and called out in a special way.

Add a Table of Contents (TOC) - Example:

Step 1 - 

• On the right-hand side of your page, you will see a fixed "side-bar" that has a lot of options. 
• The 5th option down is called "Table of Contents"
• Open that option and toggle ON the Table of Contents.
• This will place a yellow TOC section on your page.

Step 2 -

• As you build the page, you will need to add the component TOC Jump Link in the spots you want the link to go to.
• When you add that component, you will also add the Jump Link Title. This is where you will add the word(s) that you want to display in the yellow TOC on page.
• We recommend keeping these simple, clear, plain-language. You want a user who clicks on this page to quickly understand what is on the the page and where they will go if they click on the words.

Setting the Page Info:

On the right-hand side sidebar, you will see an option called Node Information. Node is another word for Page.

In this section, you will have the option to set the:

• Publish Date
• Language - Important for French language content on spcanada.ca to switch this to French
• Variant Type - it is unlikely that you will need to touch this
• Areas (see below)
• Written By - if you add an Author, it will display in the hero along with the Publish Date. This information is great to have for SEO/AEO/GEO.
• Exclude from Search Toggle - This page is excluded from search as it's an internal resource, but most of your pages you will want to avoid touching this toggle.

Your website content is grouped into various Areas that map to the primary navigation. These Areas allow different pages of content to be connected/related to each other. The Areas will help map the page you're creating to the section it is a part of. The Areas will also determine what the color of the Hero space is.

• About Us (Dark Pink)
• Find Support (Dark Blue)
• Intro to MS (Light Teal)
• Managing MS (Light Pink)
• MS Research (Yellow)
• Take Action (Dark Teal)
• N/A (Light Blue -- what this page is)