property-reference.md

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