Progress item block
A label with an icon and a progress line that shows a value from 0 to 100 %, for example a skill or a rating. Add several items next to each other (for example in a Grid or Row) to build a set of bars.
Icon and spacing
| Setting | Description |
|---|---|
| Image | Optional icon shown before the label. |
| Image dark mode | Icon used in dark mode. If not selected, the light mode image is used. Available only when dark mode is enabled in Theme settings and an image is selected. |
| Icon size | Size of the icon. Available only when an image is selected. Range: 12–96 px, step 2. Default: 24 px. |
| Space between icon and label | Distance between the icon and the label. Available only when an image is selected. Range: 0–40 px. Default: 8 px. |
| Space between label and line | Distance between the label and the progress line. Range: 0–40 px. Default: 8 px. |
Label
| Setting | Description |
|---|---|
| Label | Text above the line. Supports inline formatting. Leave empty to hide it. The settings below appear only when a label is entered. Default: Controller. |
| Preset | Typography preset: Hero, H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Presets are edited in Theme settings → Typography. Default: Paragraph. |
| Font | Font family: Heading large, Heading small, Body or Accent. Default: Heading large. |
| Color | Text color: Heading, Text or Accent. Default: Heading. |
| Text style | Letter case: Normal, Uppercase or Lowercase. Default: Uppercase. |
Progress line
| Setting | Description |
|---|---|
| Progress | How much of the line is filled. Range: 0–100 %. Default: 40 %. |
| Line thickness | Thickness of the line. Range: 1–12 px. Default: 4 px. |
| Line corner radius | Rounding of the line ends. Range: 0–8 px. Default: 0 px. |
| Track opacity | Opacity of the unfilled part of the line. Range: 5–100 %, step 5. Default: 20 %. |
| Line color | Color of the filled part: Heading, Text, Accent or Custom. Default: Accent. |
| Custom | Custom color of the filled part. Available only when Line color is Custom. Default: #000000. |
| Custom dark mode | Custom color used in dark mode. Available only when Line color is Custom and dark mode is enabled in Theme settings. Default: #FFFFFF. |
Animation
| Setting | Description |
|---|---|
| Animate on scroll | Fills the line when the block scrolls into view. Default: On. |
| Animation duration | Time the line takes to fill. Available only when animation is on. Range: 200–3000 ms, step 100. Default: 1200 ms. |
| Animation delay | Wait before the line starts filling. Give items in a row different delays to stagger them. Available only when animation is on. Range: 0–2000 ms, step 25. Default: 150 ms. |
Padding
| Setting | Description |
|---|---|
| Top, Bottom, Left, Right | Space around the item on desktop. Range: 0–100 px, step 1. Default: 0 px. |
| Top mobile, Bottom mobile, Left mobile, Right mobile | Space around the item on mobile. Range: 0–100 px, step 1. Default: 0 px. |