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!

PropertyDescriptionValuesElementsConnectionsLoops

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

or

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

Last updated