The data elements give you the option to visualize data. This includes a counter element that counts up to a given value, a bar element that progresses to a given value, and an animated circle element.
💡 Curious to see the new data elements in action? Check out this Foleon Doc for some inspiration.
In this article
Using the data elements
You can find the three elements at the bottom of the elements tab.
Drag the element into a column on the page. Once dropped, the canvas will show the default settings, which you can easily adjust within the element settings.
💡When you're working with the Content Builder, it's not possible to add a data element to your page. They're included in block templates in the Content - Data section.
The bar and circle element
You can use the bar and circle element to show how much progress you have made and how much left you’ve got to make. You can use multiple bars in a single column and style them separately.
The bar will start animating and counting up once it is visual to the reader and according to the entered max and shown value. To visualize this progress optimally, we provide you with the following options:
- Add max value to indicate the maximum value that can be hit
- Add the shown value to indicate the current state
- Enter a prefix to indicate what kind of data is displayed (for instance, $). This is optional.
- Enter a suffix to indicate what kind of data is displayed (for instance, %). This is optional.
Styling of the Bar
- Style the color of the max value, the shown value in the settings
- Style the color of the prefix and suffix through the rich text editor
- Adjust the corners to rounded or square
- Adjust the weight
- Spacing bottom
Default entrance animation and duration, similar to any other element
In the example below, you can see what the bar element looks like in your content editor.
In the example below, you can see what the circle element looks like in your content editor.
You can set default styling for the circle element in your Brand Kit and brand settings.
The counter element is similar to the progress bar and circle. It allows you to visualize data in an easy way, and its counting up is based on the configured settings. As the counter is always a number, the styling is done through the rich text editor.
In the example below, you can see what the counter element looks like in your content editor.
Style the data elements
In your Brand Kit and brand settings, you can decide on global styling for the data elements. When you've set these up, you ensure the data elements are automatically on-brand.
Compatible with PDF
With the use of our native data elements, the Foleon Doc is compatible with our “export to PDF” option. The PDF will display all your visualizations with the selected value.
In the example below, you can see what the data elements look like in an exported PDF.