Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I save my changes in Kumu?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Overview
  2. Advanced Editor hub

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

'Field name'

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

icon-style

solid or regular

https://...

Any URL. URLs starting with https are safest and will work best within Kumu.

string template

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).

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

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

PreviousColor referenceNextSelector reference

Last updated 10 months ago

Was this helpful?

The name of one of our

The name of any of your , wrapped in single or double quotes

The name of any icon from the collection.

Any combination of letters, numbers, , or names of your fields wrapped in double curly brackets {{}}. Wrap the entire thing in double quotes. See our for examples.

If you find a property or a value that's not documented here, !

let us know
color palettes
fields
Font Awesome
supported markdown (including raw HTML)
label templates guide