There is Code to make this Simple Nav match a hero background colour. The options are: Frost, Secondary, and Primary.

If you need to use the script font, unlink the symbol and edit the title normally, adding a span with the class of text-h1-alt to the word you wish to highlight. Using the symbol overrides will not work.

If you need to use the script font, unlink the symbol and edit the title normally, adding a span with the class of text-h1-alt to the word you wish to highlight. Using the symbol overrides will not work.

To add a new form, use the Form Code Embed override, and replace the code in the embed in the Rich Text Area with the new form. Remember to add the symbol CODE - Hubspot Forms to the top of any page that uses this component underneath the CODE - Universal Styles symbol. Ensure that in Hubspot in "Style and Preview" the "Set as Raw HTML" switch is on for the styles to work - marketing should be able to do that!

As well, to use the script font in the title, wrap the word in a span and add the class text-h1-alt

If you need to use the script font, unlink the symbol and edit the title normally, adding a span with the class of text-h1-alt to the word you wish to highlight. Using the symbol overrides will not work.

If you need to use the script font, unlink the symbol and edit the title normally, adding a span with the class of text-h1-alt to the word you wish to highlight. Using the symbol overrides will not work.

To maintain proper order of headings, use this component when the Icon List needs a section title.

To edit, replace the video link in the video embed within the Rich Text Element.

By default, these components have 5 bullet points. If you need to add an additional point or delete a point, unlink the symbol first. Then, ensure you duplicate or delete the List Item not the internal Div.

Use this block for when you need a bit more flexibility for content - like adding lists, photos, links, subheadings in between content, or multiple paragraphs.

The code and functionality is based on the use of anchor tags. There is a hidden anchor (vert-carousel_anchor) before each image (vert-carousel_image-wrapper), and each inner content item (vert-carousel_inner-content). The content items (vert-carousel_content-item) all have an id on them that the anchors are linked to. When the item with this id is in view, the anchors automatically add a w--current class. Using this class, the transition happens.

It seems sometimes unlinking the symbol to add a new point can cause the ids to unlink and may have unexpected behaviour - My recommendation is to find a page with the number you need and edit from there (ie. this one has four, and the Prices page has 3). Or there are instructions below that can help you resolve the issues!

If you need to add or delete a point, unlink this symbol and edit it manually.

To add a point: 

• In the vert-carousel_images-container, copy and paste the last vert-carousel_anchor and vert-carousel_image-wrapper and replace the internal image with your new one.
• In the vert-carousel_content-container, copy and paste the last List Item. Replace the internal content, and add a new ID in Settings to the vert-carousel_inner-content (ie. vert-carousel-5).
• For both vert-carousel_anchor's (the one before the vert-carousel-image and the one in the List Item), link it to the new section ID (ie. vert-carousel-5). Voila!

To delete a point:

• In the vert-carousel_images-container, the intended vert-carousel_anchor and vert-carousel_image-wrapper.
• In the vert-carousel_content-container, delete the intended List Item.

In order to use this component, ensure the CODE - Vertical Carousel symbol is at the top of the page under the CODE - Universal Styles symbol or the functionality will not work.

When editing the component using the overrides, remember to upload the same image for each Image and Mob Image. Unfortunately, due to the way the section is built these needed to be split.

Do not panic that it does not preview here it is because both carousels are on one page!

Made this section as it seems the most common use for this component moving forward is the Main props on the home page of the main site. As well it comes built in with the footnote for the one value prop. Remember to place the CODE - Vertical Carousel symbol at the top of the page under the CODE - Universal Styles symbol.

The only override available is for the footnote section to ensure it is connected - by default it is set to the ID tag in the Footnote component, footnote-fifty-plan. Remember to include the Footnote symbol at the bottom of the page before the footer - both section links should auto populate when this symbol and the Footnote symbol are on the same page!

Use the above symbol (Vertical Carousel) if you need to use this for other content as this one shouldn't need to be edited! 

If you need to add or delete a step, unlink this symbol and ensure you duplicate or delete the List Item, not the internal Div.

To add a new form, use the Form Code Embed override, and replace the code in the embed in the Rich Text Area with the new form. Remember to add the symbol CODE - Hubspot Forms to the top of any page that uses this component underneath the CODE - Universal Styles symbol. Ensure that in Hubspot in "Style and Preview" the "Set as Raw HTML" switch is on for the styles to work - marketing should be able to do that!

The Town list below is currently connected to the Town Collection List in the CMS. To add a new name, enter a new CMS item to the collection. This way everything is connected and can be up to date.

The Town list below is currently connected to the Town Collection List in the CMS. To add a new name, enter a new CMS item to the collection. The links are also being pulled in through here. This way everything is connected and can be up to date.

To use this component, ensure you have the CODE - Tooltip symbol at the top of the page underneath the CODE - Universal Styles symbol.

To use this component, ensure you have the CODE - Tooltip symbol at the top of the page underneath the CODE - Universal Styles symbol.

To use this component, ensure you have the CODE - Tooltip symbol at the top of the page underneath the CODE - Universal Styles symbol.

If you need to add another FAQ or delete one, unlink the symbol and ensure you are copy and pasting the List Item not just the internal accordion. Similarly, if you need to re-order the questions, make sure you are moving the List Items not the accordions.

It seems unlinking this symbol to add or remove FAQs will cause the animations to get confused. I would recommend copy and pasting the section with the specific number of FAQs you need from a previous page and edit from there (the Movers campaign pages would be a good to take from!).

Use the Preview to make sure the animation is working correctly.

This component uses the Rich Text element, meaning you have control over the content below like adding and removing the lists, creating multiple paragraphs, etc. The font size is determined by the class on the Rich Text Element to make font small for the fine print.

This component is to ensure there are accessible footnotes. It is set up specifically for being paired with the Vertical Carousel - Main Values symbol - the section link should be set to fifty-plan-ref but should automatically be populated when added to a page with the carousel.

In order to add to this, unlink this symbol and please ensure you duplicate the List Item not the internal Div.

1. In this component, select the List Item and, in the Settings panel on the right, put a unique ID - I would recommend using the pattern of starting it with footnote- and describe the content. This is the ID you will link to in your footnote!
2. In the content you wish to link from, highlight the footnote number in the copy and insert a link around it. Add the class footnote-sm and link it to the unique ID you added above. As well, on the paragraph or the nearest Div container, add an unique ID so you can link back to this section from the footnotes. Also, add aria-labelledby = footnote-title, so that the screenreader will read out what the link means.
3. Back in your footnotes, ensure the link with the arrow links back up to the ID you gave the paragraph or Div you set up in the last step.
   

Place this symbol above either of the footer symbols, but still within the Main container.

The year is connected to a piece of Javascript that will automatically replace it with the current year so don't worry about changing it! Since it is Javascript, it will only show on the published live page.

Please prioritize using this footer with the Nav with the CTA!

The year is connected to a piece of Javascript that will automatically replace it with the current year so don't worry about changing it! Since it is Javascript, it will only show on the published live page.

Please use this footer sparingly, only using in conjunction with the Simple Nav without the CTA.