Animated statistics block – large and small

Guide

• Template: Landing page only.
• Section: Full width.
• Add custom block: Content Statistics Block.
• Type: Animated – up to 3 sections/statistics can be added.
• Colour: the colour selection is reflected in the statistic value and highlighted in the pictogram.
  • Possible values:
    • Brand Dark
    • Brand Light – do not use. Brand light in this component does not meet accessibility requirements. Brand light is best used as a section background colour.
    • Brand Accent
    • Brand Supplementary.
• Size: the font size of the statistic.
  • Note: check the box 'Is animated' to animate the statistic value.

  • Large

    • User cannot enter more than 5/4 characters in the Item value excluding number formatting.

      • 5 characters is the limit when 1 or 2 sections added.

      • 4 characters is the limit when 3 sections are added.

  • Small 

    • Users can enter more than 4 characters in the Item value field.

Create the animated statistic

1. Statistics data feed (optional): link to a dataset. Check with your developer about using the data feed. 
2. Item title (optional): appears as a heading (bold text dark) in the data section.
3. Footnote indicator (optional): appears as superscript next to the item title.
4. Item value:  Numbers, letters, special characters, can be entered.
5. Note: check character limits for the font size (large or small) you have selected.
6. Units (optional): used to add a unit value to the Item value, for example, km, m, %, etc.
7. Note: unit limits:
   1. Large font size → limit of 2 characters.
   2. Small font size → no restriction to the number of characters.
8. Unit formatting is superscript by default.
9. Item description: WYSIWYG.
10. Link and Link text (both optional): option to include a URL and link description.
    1. Note: this follows the all or none rule. If any of the sections have a link, then links should be added to the remaining sections.
    2. Hover over state is brand dark
    3. Link text is white
    4. In non-hover over state, an arrow icon indicates a link is there.
11. The Position of the item specifies the position of the value within the block.
12. You can also select whether to Display current item or not on the page.
13. Icon (pictogram): select from a predetermined list. The pictogram will inherit the colour selected for the block.
14. Disclaimer field (optional): WYSIWYG at the bottom of the block for further text or footnote source references.

Example #1

Section: Full width.

Colour: Brand Dark.

Size: Large.

3 items.

Example #2

Section: Full width.

Colour: Brand Supplementary.

Size: Large.

1 item.

Example #3

Section: Full width.

Colour: Brand Supplementary.

Size: Small.

3 items.

Example #4

Section: Full width.

Colour: Brand Dark.

Size: Small.

2 items with hyperlinks.

Example #5

Section: Full width.

Colour: Brand Accent.

Size: Small.

1 item.

Site examples

Bushfire recovery case study - State of the Customer - large and small 

Regulation and administration - Services - small

State of the Customer - large