The Facts tool lets you highlight key content such as factoids, statistics, summary information, and more. It helps you communicate in an efficient, concise way and add visual interest to your projects.

You can add an individual item to the facts tool containing text content (limited to 160 characters), a source for the fact (if applicable), an icon and give it a unique colour. Additionally, you can highlight words or phrases to emphasise important content, which will colourise and bold the text content to make it stand out.

Facts content appears as a grid of 'fact cards' on your page. You can customise how your fact cards look by adjusting the layout, size, alignment and icon style.

🖼️ Examples

Here's some examples of how you can configure the Facts tool:

This example shows a set of simple facts displayed in the 'Masonry' style, with 'large' text.

This example adds icons and uses the 'Grid' style which ensures fact cards are equally sized. We've opted to only show six at a time, but visitors can click the 'show more' button to load more.

This example aligns the content to the 'right', uses a 'medium' font size and adds a source so visitors can see where the information is derived.

⚙️Settings

Settings you can configure in the Facts tool:

Basic

  • Items - lists all items displayed in the tool and allows you to add, edit and reorder the content of each item and add new items. For each item, you can adjust the following properties:
    • Text - add and style the main text content of the fact, including highlighting keywords or phrases. Content is limited to 160 characters.
    • Source - provide an optional source for your fact, including a link to an external reference.
    • Colour - sets the colour used in the fact card to colourise the 'highlighted' text, border and icon.
    • Icon - choose an icon from the icon library to add visual interest.

Display

  • Progressive Loading - lets you set how many fact cards are shown before a 'show more' button appears to load additional facts. When you have many fact items, you should use this feature to prevent them from dominating the page or slowing your site down. You have the option to choose from 6, 12 or 24 items.
  • Style - sets the display style for how the facts cards appear together on the page. The 'Grid' option ensures that all fact cards are the same size and display as a perfect grid. The 'Masonry' option allows fact cards to be different sizes, creating a tiled-like effect.
  • Columns - sets the number of columns that fact cards display on the page, letting you modify their overall size. You have the option to choose from 2,3,4, or 5 columns. On smaller devices, such as mobile phones, the facts cards will resize automatically.
  • Text size - sets the relative size of the text content in a fact card. You have the option to choose between 'normal', 'medium' and 'large'.
  • Alignment - sets the text alignment for the fact item. You have the option to choose from 'centre', 'left' or 'right'.
  • Icon Style - determines the icon style used in the display, letting you choose from 'simple', which displays the icon as-is, or 'circle', which sets the icon into a circle shape.

Advanced

  • Block Title - sets an optional title for the Block.
  • Block Description - sets an optional description for the Block that appears below the Block Title.

🎯 Key Actions

Key actions you can perform in the Facts tool:

To add a new fact item to a Fact tool:

  1. Edit the relevant Fact tool to access the Block Settings
  2. Click New Item from the top-right of the Basic tab.
  3. Add the text, source, icon and colour. You can emphasise keywords in the text content by selecting the target text with the cursor and clicking the 'highlight' icon in the toolbar to bold and colourise the text to make it stand out.
  4. When finished, click the Save button at the bottom of the item (you may need to scroll down to see this). After saving, you will return to the main Block Settings Note: this Save button is different from the entire Block, so be cautious not to click this accidentally.
  5. Confirm the change by clicking the 'Save' button at the bottom of the Block.

♿ Web Accessibility

If you have used the 'highlighting' function on your text content to give it emphasis, your colour choice may impact your content's web accessibility. Ensure the colour meets the minimum contrast value against a white background. Generally, only darker colours will pass but you can use a tool like WebAIM to check.

To edit an existing fact item

  1. Edit the relevant Fact tool to access the Block Settings
  2. Find the relevant fact item listed under Items in the basic tab.
  3. Click the 'pencil' icon next to the fact item to remove it from the list.
  4. Edit the facts content and confirm the change by clicking the Save button at the bottom of the item (you may need to scroll down to see this). After saving, you will return to the main Block Settings Note: this Save button is different from the entire Block, so be cautious not to click this accidentally.
  5. Confirm the change by clicking the 'Save' button at the bottom of the Block.

You can remove an existing fact item appearing in the Facts tool if required.

To delete an existing fact item:

  1. Edit the relevant Fact tool to access the Block Settings
  2. Find the relevant fact item listed under Items in the basic tab.
  3. Click the 'trash' icon next to the fact item to remove it from the list.
  4. Confirm the change by clicking the 'Save' button at the bottom of the Block.

There are many style properties you can apply to the Facts tool that changes the way it looks.

To change the appearance of a Facts tool

  1. Edit the relevant Fact tool to access the Block Settings
  2. Adjust the settings listed in the Display tab. You can adjust the number of items that show, the size and alignment of text, the overall style and the icon style (see the Settings section for a detailed description of all options)
  3. Confirm the change by clicking the 'Save' button at the bottom of the Block.