Stats
How to add and style stats.
Last updated
Was this helpful?
How to add and style stats.
Last updated
Was this helpful?
Stats are used to display numbers and data in a box. Stats can be horizontal or vertical, and the orientation can be adjusted according to device size. Stats can be made up of multiple stat parts, essentially joining them together, or they can be presented as individual stats.
Location in the Parts Library: Base Parts > Data Display > Stats
A stats part (parent) can consist of a few different parts (children). A stats part can contain one or more 'stat parts', and each of those may contain:
A stats title, containing text
A stats value, containing large, bold text
A stats description, containing small, pale text
A stats figure, which could contain an avatar; an image, or an icon
Whilst each of these parts naturally comes with formatting, such as text color and weight, each of the parts can be edited and formatted as needed.
Below is a brief video showing these components within a stats part, and their parent/child relationship. Click the play button to view.
It's important to know that the stats part editor will format the parent part, not the parts within it, meaning that properties such as border and shadow will be applied to the outside of the stats part, rather than the individual parts within it.
To switch the orientation of stats parts, say from horizontal to vertical, select the stats part to activate the property editor on the right.
Then, select Orientation, and choose either horizontal or vertical. The orientation of the stats part can be changed based on device size. For example, a horizontal stats part may not fit on a mobile screen, so changing it to vertical on mobile and horizontal on a larger device makes sense.
In the video below, a horizontal stats part has been made vertical for small devices. On a large device, we've made the stats part horizontal again. Click the play button to view.
Stats parts can be given a hard edge or have the level of rounding changed using the Decoration Editor, in the 'Rounding' tab.
Rounding can be applied to all of the stats part, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
To remove all rounding from the stats part, giving it a hard edge, choose rounding of 'none'.
In the rounding editor, when 'full' is applied to 'all' of the stats part, the stats part will take on a pill shape.
To style the text, select it and then using the Font Editor, you can adjust the font family, size, weight, style, and line height. Using the Colors Editor, the color of the text can also be changed.
To apply between the individual stat parts, select the stat part to open the property editor on the right. Select the border property, and apply a color. This will add color to the line of the stat part. Do this for all of the stat parts.
To apply a border around the whole stats part, select the stats part, select the border property, and apply color and size to the border.
Like many other parts, , , , and can be applied using the property editor on the right, once the stats part has been selected.
When it comes to applying and , selecting the color editor and changing the background color will apply your chosen background color to the whole stats part. Changing the foreground color, however, will only change the stats values (the parts with the large, bold text). Other text parts will need to have their foreground color changed individually.
Default stats parts are naturally .
Applying an of the stats part is easy - just select the stats part, then go to Image in the property editor on the right. Open up the image property editor, and select your image from the Media Gallery, or upload an image from your device.
You can then adjust the image using the Decoration Editor in the property editor, by accessing the 'Image Opacity' tab.
Changing the in a Stats Parts is done like any other text part. Select the text which will open the property editor panel on the right. Go to the Text Editor, and replace the value with your new text.
Icons
Images
Text
Customizing and formatting
