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