Beneath views, Kumu uses a powerful CSS-based language to control the appearance of your maps.
If you're familiar with CSS, the advanced view editor will quickly become your best friend. The view builder only exposes a small set of the available properties. Being able to write views by hand is the only way to harness the full power of Kumu.
Note: We've adopted standard CSS properties and values wherever possible, straying where
conventional values were irrelevant or misleading (eg display: map vs display: block),
and adding properties specific to Kumu (such as bullseye-color).
There are just few more things you should know about the valid values listed below:
| Where you see... | You can use... |
|---|---|
color |
Any CSS web color or hex color code |
colorPalette |
The name of one of our color palettes |
'Field name' |
The name of any of your fields, wrapped in single or double quotes |
number or [number] |
Any number |
number number |
Any two numbers separated by a space, e.g. 5 10 |
0 |
Only the number 0 |
0..1 |
Any number between 0 and 1 |
generic-family |
The name of any CSS web safe font family |
family-name |
The name of any font family. freight-text-pro and proxima nova will always work, but other non-web-sage font families will only work if your reader has the font installed on their device. |
icon-name |
The name of any icon from the Font Awesome collection. |
icon-style |
solid or regular |
https://... |
Any URL. URLs starting with https are safest and will work best within Kumu. |
string template |
Any combination of letters, numbers, supported markdown (including raw HTML), or names of your fields wrapped in double curly brackets {% raw %}{{}}{% endraw %}. Wrap the entire thing in double quotes. See our label templates guide for examples. |
auto, background, bold, bottom, center, circle, clip, contain, cover, dashed, gradient, hidden, inherit, italic, manual, map, none, normal, off, rectangle, solid, square, url, visible, or wrap |
That exact keyword |
All values are unitless.
The table below lists all of the properties recognized by elements, connections, and loops. Hover over the information icon at the far right of the table rows to see additional details and valid values for each property (when there are multiple valid values, we've listed them as separate snippets of inline code).
If you find a property or a value that's not documented here, let us know!
| Property | Elements | Connections | Loops | |
|---|---|---|---|---|
| arrow-color | ||||
| arrow-height | ||||
| arrow-min-height | ||||
| arrow-min-width | ||||
| arrow-visibility | ||||
| arrow-width | ||||
| border-color | ||||
| border-opacity | ||||
| border-width | ||||
| bullseye-color | ||||
| bullseye-opacity | ||||
| bullseye-size | ||||
| bullseye-visibility | ||||
| color | ||||
| curvature | ||||
| dash | ||||
| delay-color | ||||
| delay-height | ||||
| delay-position | ||||
| delay-stroke-width | ||||
| delay-visibility | ||||
| delay-width | ||||
| display | ||||
| flag | ||||
| flag-offset | ||||
| flag-size | ||||
| font-color | ||||
| font-family | ||||
| font-size | ||||
| font-style | ||||
| font-weight | ||||
| height | ||||
| icon | ||||
| icon-color | ||||
| image-size | ||||
| image-url | ||||
| image-visibility | ||||
| label | ||||
| label-visibility | ||||
| layer | ||||
| length | ||||
| margin | ||||
| opacity | ||||
| outline-color | ||||
| outline-offset | ||||
| outline-opacity | ||||
| padding | ||||
| path-opacity | ||||
| pattern | ||||
| pointer-events | ||||
| popover | ||||
| prepost-inset | ||||
| prepost-offset | ||||
| profile | ||||
| scale | ||||
| shadow-color | ||||
| shadow-opacity | ||||
| shadow-size | ||||
| shadow-visibility | ||||
| shape | ||||
| size | ||||
| strength | ||||
| style | ||||
| text-align | ||||
| text-overflow | ||||
| visibility | ||||
| width |