The Content Snake Block allows up to 6 statistic values to be displayed in a timeline/snake-like animation.
Before using the snake visualisation
- Lottie files must be designed with the Supplementary colour as the Lottie file will not inherit the Supplementary colour. For more information, please refer to Using Lottie files.
How to add a Snake Block on a landing page
You can add this to a landing page by typing ‘content’ in the search box when adding a block to a page. Then select Content Snake Block under DCS.
You should use this component on a Full width section.
The Add media button allows you to add Lottie files (.json)
- Lottie files must be designed with the Supplementary colour as the Lottie file will not inherit the Supplementary colour.
- You will need assistance and advice from UX/Design before using this component. Raise a content request to contact our UX team.
Statistic value is mandatory, is not animated and can be a mixture of numbers, letters and special characters
- While there is no character limit applied to the statistic value field, it is recommended to keep entry to this field as short as possible.
- You can select the colour for the statistics value under Statistics colour. Currently 'Brand supplementary' and 'Brand dark' is available.
Text before will appear on top of the statistic value, while Text after will appear on the bottom. Both are optional.
Position of the Item determines the order of the items, with 0 being the top-most item shown on the block and 7 being the bottom-most item
Display current item determines whether the statistic item will be displayed on the block or not.
Animation for icons
- Animation will be one time
- The animation should take effect when the page is loaded and the website visitor scrolls down the page to the specific section. It is driven by the fold on the page.
- The colour of the Animation line has 4 colour options. You can choose from 'Brand accent', 'Brand dark', 'Brand light' and 'Brand supplementary'
- The Animation for the line is hard-coded
- Note: The statistic values will not animate
See this live on nsw.gov.au
Visit Snake Visualisation to see how this works on a live page.
You can also see how agencies have applied the component below:
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.