Comment on page

Property reference

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 {{}}. 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.
Supported Properties
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
Description
Values
Elements
Connections
Loops
arrow-color
Override the arrow color for a connection.
color
arrow-height
Used in combination with arrow-min-height to set arrow height.
number
arrow-min-height
Used in combination with arrow-height to set arrow height.
0
arrow-min-width
Used in combination with arrow-width to set arrow width.
0
arrow-visibility
Controls arrow visibility for directed connections.
visible hidden
arrow-width
Used in combination with arrow-min-width to set arrow width.
number
border-color
Controls border color.
color
border-opacity
Controls border opacity.
0..1
border-width
Controls border width.
number
bullseye-color
Controls bullseye color.
color
bullseye-opacity
Controls bullseye opacity.
0..1
bullseye-size
Controls bullseye size.
0..1
bullseye-visibility
Controls bullseye visibility.
visible hidden
color
Controls shapes' color. Gradient only available for connections.
color gradient(color, color)
curvature
Controls line curvature.
0..1
dash
Controls the length of connection dashes (first number) and the distance between them (second number).
number number
delay-color
Controls color of delay markings.
color inherit
delay-height
Controls height of delay markings.
number
delay-position
Controls delay markings' position along the connection.
0..1
delay-stroke-width
Controls width of delay markings.
number
delay-visibility
Controls visibility of delay markings.
visible hidden
delay-width
Controls space between delay markings.
number
display
Controls inclusion in the map. Hidden objects will be fully removed from the map.
map none
flag
Defines field and color scale for flags.
'Field name' with colorPalette
flag-offset
Controls space between flags and their elements.
number
flag-size
Controls thickness of flags.
number
font-color
Controls label font color.
color
font-family
Controls label font family.
family-name generic-family
font-size
Controls label font size.
number
font-style
Controls label style.
normal italic
font-weight
Controls label font weight.
normal bold
height
Controls height of elements that are squares and/or rectangles.
auto number
icon
Adds an icon as the item's image.
icon-name icon-name icon-style off
icon-color
Controls the icon color.
color
image-size
Controls image size.
cover contain
image-url
Provides source url of image.
url(http://...)
image-visibility
Controls image visibility
visible hidden
label
Replaces the default label with a label template.
none string template
label-visibility
Controls label visibility for all types.
visible hidden
layer
Controls whether an item is in the foreground or background.
auto background
length
Controls connection resting length.
number
margin
Controls amount of space between the border of an element and its connections.
number none
opacity
Controls loop label opacity and element opacity.
Number between 0..1
outline-color
Controls the color of selected elements' outlines.
color
outline-offset
Controls the distance between selected elements and their outlines.
number
outline-opacity
Controls the opacity of selected elements' outlines.
0..1
outline-width
Controls the width of selected elements' outlines.
number
padding
Controls amount of space between the border of an element and its contents (image or bullseye).
number
path-opacity
Controls connection opacity.
0..1
pattern
Controls connection pattern. Equivalent of style.
solid dashed
pointer-events
Controls whether or not an item can be clicked.
auto none
popover
Sets the popover content
none string template
prepost-inset
Controls the inset of pre-labels and post-labels.
number
prepost-offset
Controls the offset of pre-labels and post-labels.
number
profile
Controls whether or not the profile can be opened
true false
scale
Controls element and connection scale (multiple of base size).
number
shadow-color
Controls shadow color.
color
shadow-opacity
Controls shadow opacity.
0..1
shadow-size
Controls shadow size.
1..5
shadow-visibility
Controls shadow visibility
visible hidden
shape
Controls shape.
circle square rectangle
size
Controls base size.
number
strength
Controls connection strength.
0..1
style
Controls connection style. Equivalent of pattern.
solid dashed
text-align
Controls alignment of element labels.
bottom center
text-overflow
Controls text wrapping and truncating.
off auto auto [number] manual wrap wrap [number] clip clip [number] none
visibility
Controls visibility. Hidden objects will still affect layout and metrics.
visible hidden
width
Controls width of elements that are squares and/or rectangles.
auto number

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 `{{}}`. 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

Property	Description	Values
`arrow-color`	Override the arrow color for a connection.	`color`
`arrow-height`	Used in combination with arrow-min-height to set arrow height.	`number`
`arrow-min-height`	Used in combination with arrow-height to set arrow height.	`0`
`arrow-min-width`	Used in combination with arrow-width to set arrow width.	`0`
`arrow-visibility`	Controls arrow visibility for directed connections.	`visible` `hidden`
`arrow-width`	Used in combination with arrow-min-width to set arrow width.	`number`
`border-color`	Controls border color.	`color`
`border-opacity`	Controls border opacity.	`0..1`
`border-width`	Controls border width.	`number`
`bullseye-color`	Controls bullseye color.	`color`
`bullseye-opacity`	Controls bullseye opacity.	`0..1`
`bullseye-size`	Controls bullseye size.	`0..1`
`bullseye-visibility`	Controls bullseye visibility.	`visible` `hidden`
`color`	Controls shapes' color. Gradient only available for connections.	`color` `gradient(color, color)`
`curvature`	Controls line curvature.	`0..1`
`dash`	Controls the length of connection dashes (first number) and the distance between them (second number).	`number number`
`delay-color`	Controls color of delay markings.	`color` `inherit`
`delay-height`	Controls height of delay markings.	`number`
`delay-position`	Controls delay markings' position along the connection.	`0..1`
`delay-stroke-width`	Controls width of delay markings.	`number`
`delay-visibility`	Controls visibility of delay markings.	`visible` `hidden`
`delay-width`	Controls space between delay markings.	`number`
`display`	Controls inclusion in the map. Hidden objects will be fully removed from the map.	`map` `none`
`flag`	Defines field and color scale for flags.	`'Field name' with colorPalette`
`flag-offset`	Controls space between flags and their elements.	`number`
`flag-size`	Controls thickness of flags.	`number`
`font-color`	Controls label font color.	`color`
`font-family`	Controls label font family.	`family-name` `generic-family`
`font-size`	Controls label font size.	`number`
`font-style`	Controls label style.	`normal` `italic`
`font-weight`	Controls label font weight.	`normal` `bold`
`height`	Controls height of elements that are squares and/or rectangles.	`auto` `number`
`icon`	Adds an icon as the item's image.	`icon-name` `icon-name icon-style` `off`
`icon-color`	Controls the icon color.	`color`
`image-size`	Controls image size.	`cover` `contain`
`image-url`	Provides source url of image.	`url(http://...)`
`image-visibility`	Controls image visibility	`visible` `hidden`
`label`	Replaces the default label with a label template.	`none` `string template`
`label-visibility`	Controls label visibility for all types.	`visible` `hidden`
`layer`	Controls whether an item is in the foreground or background.	`auto` `background`
`length`	Controls connection resting length.	`number`
`margin`	Controls amount of space between the border of an element and its connections.	`number` `none`
`opacity`	Controls loop label opacity and element opacity.	`Number between 0..1`
`outline-color`	Controls the color of selected elements' outlines.	`color`
`outline-offset`	Controls the distance between selected elements and their outlines.	`number`
`outline-opacity`	Controls the opacity of selected elements' outlines.	`0..1`
`outline-width`	Controls the width of selected elements' outlines.	`number`
`padding`	Controls amount of space between the border of an element and its contents (image or bullseye).	`number`
`path-opacity`	Controls connection opacity.	`0..1`
`pattern`	Controls connection pattern. Equivalent of style.	`solid` `dashed`
`pointer-events`	Controls whether or not an item can be clicked.	`auto` `none`
`popover`	Sets the popover content	`none` `string template`
`prepost-inset`	Controls the inset of pre-labels and post-labels.	`number`
`prepost-offset`	Controls the offset of pre-labels and post-labels.	`number`
`profile`	Controls whether or not the profile can be opened	`true` `false`
`scale`	Controls element and connection scale (multiple of base size).	`number`
`shadow-color`	Controls shadow color.	`color`
`shadow-opacity`	Controls shadow opacity.	`0..1`
`shadow-size`	Controls shadow size.	`1..5`
`shadow-visibility`	Controls shadow visibility	`visible` `hidden`
`shape`	Controls shape.	`circle` `square` `rectangle`
`size`	Controls base size.	`number`
`strength`	Controls connection strength.	`0..1`
`style`	Controls connection style. Equivalent of pattern.	`solid` `dashed`
`text-align`	Controls alignment of element labels.	`bottom` `center`
`text-overflow`	Controls text wrapping and truncating.	`off` `auto` `auto [number]` `manual` `wrap` `wrap [number]` `clip` `clip [number]` `none`
`visibility`	Controls visibility. Hidden objects will still affect layout and metrics.	`visible` `hidden`
`width`	Controls width of elements that are squares and/or rectangles.	`auto` `number`

Color reference

Selector reference

Last modified 2mo ago