Fact panel component

Purpose

This document gives instructions for editing the fact panel component, and adding it to a page. It also gives the content author information about what pages this component can be added to, and gives examples of what pages this component is featured on.

Contents

About the fact panel component

Pages the fact panel component can be added to

Editing the title

Editing the data source of the component

Editing the visual attributes of the component

Adding a new fact panel component to a page

About the fact panel component

The fact panel component is a horizontal component that spans the length of the page. It features a background image, centred title and three statistics that are pulling from a data source.

Use a facts panel component to demonstrate evidence or social proof about something YVR has achieved. The facts panel component presents content differently depending on the number of facts.

The fact panel data-source provides content to the facts panel component, only.

Facts panel component with one fact:

Facts panel component with two/more facts:

Pages the fact panel component can be added to:

  1. Annual report section page
  2. Marketing page
  3. Top level section page

Find it on this page

Editing the title

  1. Find the page you want to edit in the content editor. For instructions, click here.
  2. Select Publish in the top navigation ribbon, and then select Experience Editor.
  3. Select the fact panel component that you would like to edit. You will know you have selected a fact panel component when you select a component and the grey menu that appears above/below the component has ‘fact panel’ at the top.
  4. Select the title that you’d like to edit.
  5. You should now be able to edit the title.
  6. When you have finished editing, press the save icon in the top navigation ribbon 
  7. Submit your changes for approval. For instructions, click here.

Editing the data source of the component

  1. In Experience Editor on the page you want to edit, select the fact panel component.
  2. Select ‘More’ on the menu that has appeared above/below the component.
  3. Select ‘Edit component properties’.
  4. Select ‘Browse’ under the ‘General’ heading in the tree list and select the data source you’d like to use for the component.
  5. Select the data source you’d like to use and press OK.
  6. Press the save icon in the top navigation ribbon 
  7. Submit your changes for approval. Click here for instructions.

Editing the visual attributes of the component

  1. In Experience Editor on the page you want to edit, select the fact panel component.
  2. Select ‘More’ on the menu that has appeared above the component.
  3. Select ‘Edit component properties’.
  4. Here you can update the image focus and animate attributes of the component under ‘Panel settings’ in the tree list.
  5. Press the OK button on the bottom right.
  6. Press the save icon in the top navigation ribbon 
  7. Submit your changes for approval. Click here for instructions.

Adding a new fact panel component to a page

  1. For a list of pages the fact panel component can be added to, click here.
  2. In Experience Editor on the page you want to edit, select a component. You’ll know when you’ve selected a component because your mouse will change to a hand with a pointing finger.
  3. Select the ‘add a content’ button on the menu that has appeared above or below the component you have just selected.
  4. Choose where you want to add your new fact panel component by selecting any of the ‘Add here’ buttons above or below the existing components on the page.
  5. Select the ‘fact panel’ option from the ‘Select a Rendering’ menu that has appeared, and press the Select button.
  6. Choose the associated content that you would like this component to have by selecting an option from the list that has appeared. Press the OK button on the bottom right.
  7. Edit the visual aspects of the component by scrolling down to Panel settings in the Control Properties tree list. You can edit the animate and image focus attributes. Press OK when you’ve finished.
  8. Press the save icon in the top navigation ribbon to save your work 
  9. Submit your work for approval. For instructions, click here.

Can't find what you're looking for?