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.

The Theme tab stores the selected theme colour name, while the Color tab stores a hex colour. Opening the Color tab from an existing theme colour resolves the current colour preview to hex so you can fine-tune it with Home Assistant's native colour picker.

Theme Picker

Light theme	Dark theme

Colour Picker

Light theme	Dark theme

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.

The visual editor icon picker has two tabs:

• Icons searches Home Assistant Material Design Icons.
• Files searches bundled Orbit icons and local icon files.

Light theme	Dark theme

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"