Shared Concepts

Shared Concepts

These behaviours are shared across Orbit Cards.

Colours

Colour fields support Home Assistant theme colours, named colours, CSS colours, and light-derived colours where supported.

accent_color: theme
accent_color: blue
accent_color: amber
accent_color: "#82b1ff"
accent_color: rgb(130,177,255)
accent_color: hsl(216,100%,75%)

Home Assistant theme variables are also supported:

accent_color: primary-color
accent_color: accent-color
accent_color: state-light-active-color
accent_color: color-red
accent_color: google-yellow

Short names such as red resolve to Home Assistant colour variables where available. Full names such as primary-color resolve to the matching CSS variable.

Theme Colours In The Editor

The visual editor colour picker has two tabs:

• Color writes a hex colour.
• Theme writes a theme colour name.

Theme colours discovered from the active Home Assistant theme are marked with T. Built-in fallback colours are marked with S.

Light Colour

Area Card also supports:

accent_color: light

When used with a light entity, the card uses the light's current colour when available.

Names

Area and Status name fields can be plain text or composed from Home Assistant context.

Plain text:

area_name: Living Room
status_name: Heating

Composed names:

area_name:
  - type: area
  - type: text
    text: Lights

status_name:
  - type: entity

Supported composed parts include:

• area
• device
• entity
• floor
• custom text

Area Card defaults the editor name picker to Area when an area is configured. Status Card defaults it to Entity when a main entity is configured.

Icons

Use Material Design Icons:

main_entity_icon: mdi:sofa

Use local SVG or image files:

main_entity_icon: motion_detected.svg
main_entity_icon: /local/icons/motion_detected.svg
main_entity_icon: local:motion_detected.svg
main_entity_icon: orbit:shower_on.svg

Short filenames are resolved from /local/icons/.

Bundled Orbit icons use the orbit: prefix:

main_entity_icon: orbit:fan.svg
main_entity_icon: orbit:motion_detected.svg
main_entity_icon: orbit:shower_on.svg

With HACS, bundled icons are served from:

/hacsfiles/Orbit-Cards/icons/

With manual install, copy dist/icons beside the JavaScript file.

Local Icon Manifest

Home Assistant does not always expose local directory listings. To make local icons easier to browse in the editor, create:

/config/www/icons/manifest.json

Simple manifest:

[
  "motion_detected.svg",
  "motion_on.svg",
  "motion_off.svg"
]

Rich manifest:

[
  {
    "name": "My Custom Icon",
    "file": "my_custom_icon.svg",
    "tags": ["custom"]
  }
]

SVG Colour Override

Inline SVG icons use the configured card/icon colour by default. To preserve a multi-colour SVG's own colours, set the matching override to false.

main_entity_icon_svg_color_override: false
button1_icon_svg_color_override: false
curve_button1_icon_svg_color_override: false

Actions

Orbit Cards support:

tap_action:
  action: none

tap_action:
  action: more-info

tap_action:
  action: toggle

tap_action:
  action: navigate
  navigation_path: /lovelace/security

tap_action:
  action: call-service
  service: scene.turn_on
  service_data:
    entity_id: scene.movie_time

Home Assistant's newer perform-action action name is also supported:

tap_action:
  action: perform-action
  perform_action: script.turn_on
  target:
    entity_id: script.good_night

Popups

Popup actions are an advanced YAML-only feature. Browser Mod must be installed for Browser Mod popups.

tap_action:
  action: popup
  popup_title: Security
  popup_content:
    type: vertical-stack
    cards:
      - type: tile
        entity: alarm_control_panel.house_alarm
        vertical: true
      - type: tile
        entity: cover.garage_roller_door
        vertical: true

Native Browser Mod fire-dom-event actions are also supported:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Security
      content:
        type: tile
        entity: alarm_control_panel.house_alarm

Bubble Card popups can be opened with hash navigation:

tap_action:
  action: navigate
  navigation_path: "#security"