☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

icon_color

Table of contents

Description:

This key defines the color of the icon displayed beside a Text Input.

The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.

Appears in:
└── _inputs
    └── *
        └── Text Input
            └── options
                └── icon_color
Types:
Array Preview EntryArray<Preview Entry>#

This key represents an array of preview entries for displaying data on Cards in the Collection browser, Structures, and Snippets.

The value is an array of preview entry objects, strings, or false values. Each preview entry object can contain a key, template, or text property. When multiple entries are provided, CloudCannon will use them in order as fallback options.

Show examplesHide examples

In this example, we have configured an array of preview entries with an array of values to provide fallback options. CloudCannon will use the value of title first, then the {name} template, and finally fall back to the static text value.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - key: title
        - template: '{name}'
        - text: Untitled
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "key": "title"
          },
          {
            "template": "{name}"
          },
          {
            "text": "Untitled"
          }
        ]
      }
    }
  }
}
Raw Text Preview Entrystring#

This key represents a raw text preview entry type for displaying static text on Cards in the Collection browser, Structures, and Snippets.

The value is a string that specifies static text to display in card previews. This is equivalent to using { text: "..." } but in a simpler format.

Show examplesHide examples

In this example, we have configured a raw text preview entry to display static text.

Copied to clipboard
collections_config:
  blog:
    preview:
      text: Untitled
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": "Untitled"
      }
    }
  }
}
False Preview Entryfalse#

This key represents a preview entry that disables the preview display for a specific field on Cards in the Collection browser, Structures, and Snippets.

The value must be false. Setting a preview entry to false will hide that preview element.

Show examplesHide examples

In this example, we have configured the preview text to be disabled.

Copied to clipboard
collections_config:
  blog:
    preview:
      text: false
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": false
      }
    }
  }
}
Examples:

In this example, we have configured the icon color for a text input with an array of values to provide fallback options. CloudCannon will use the value of icon_color first, then fall back to the static hex color value.

Copied to clipboard
_inputs:
  email_address:
    type: text
    label: Email
    options:
      icon: email
      icon_color:
        - key: icon_color
        - text: '#2196F3'
{
  "_inputs": {
    "email_address": {
      "type": "text",
      "label": "Email",
      "options": {
        "icon": "email",
        "icon_color": [
          {
            "key": "icon_color"
          },
          {
            "text": "#2196F3"
          }
        ]
      }
    }
  }
}

In this example, we have configured the icon color to use a static CSS color value.

Copied to clipboard
_inputs:
  phone_number:
    type: text
    label: Phone
    options:
      icon: phone
      icon_color:
        - text: blue
{
  "_inputs": {
    "phone_number": {
      "type": "text",
      "label": "Phone",
      "options": {
        "icon": "phone",
        "icon_color": [
          {
            "text": "blue"
          }
        ]
      }
    }
  }
}
Open in a new tab