Deck Card

Deck Card

Deck Card groups normal Lovelace cards into a shared Orbit layout.

It can wrap cards into rows, or show them as tabs where one child card is visible at a time.

type: custom:orbit-deck-card

Deck Card is currently available on the deck-card branch while it is being tested.

Layouts

Layout	Use for
wrap	Showing several child cards together in rows.
tabs	Switching between child cards in the same dashboard position.

Wrap Layout

type: custom:orbit-deck-card
layout: wrap
items_per_row: 3
separate_cards: true
decks:
  - attributes: {}
    card:
      type: tile
      entity: light.kitchen_lights
  - attributes: {}
    card:
      type: tile
      entity: light.office_lights
  - attributes: {}
    card:
      type: tile
      entity: light.wetroom_lights

Wrap layout uses:

1. items_per_row to control how many child cards appear on each row.
2. separate_cards to choose between individual child card spacing or one grouped surface.
3. Per-item padding controls when a child card needs small spacing adjustments.

Use separate_cards: false when the child cards should feel like one joined group:

type: custom:orbit-deck-card
layout: wrap
items_per_row: 4
separate_cards: false
decks:
  - attributes: {}
    card:
      type: gauge
      entity: sensor.main_import_power
  - attributes: {}
    card:
      type: gauge
      entity: sensor.boiler_power

Tabs Layout

type: custom:orbit-deck-card
layout: tabs
tab_width_mode: dynamic
tab_font_size: 18px
decks:
  - attributes:
      icon: mdi:home
      name: Home
      default: true
    card:
      type: entities
      entities:
        - light.lounge
        - light.kitchen
  - attributes:
      icon: mdi:flash
      name: Energy
    card:
      type: history-graph
      entities:
        - sensor.main_import_power

Tabs layout uses:

1. attributes.name as the tab label.
2. attributes.icon as the tab icon.
3. attributes.default to choose the tab selected on page load.
4. tab_width_mode to control how tab widths are calculated.

Tab Width Modes

Mode	Behaviour
equal	All tabs share the available width equally.
dynamic	Tabs size to their content and can scroll when needed.
user	Each tab can use its own attributes.width.

Example with a custom tab width:

type: custom:orbit-deck-card
layout: tabs
tab_width_mode: user
decks:
  - attributes:
      icon: mdi:sofa
      name: Lounge
      width: 140px
    card:
      type: tile
      entity: light.lounge_lights

Deck Items

Every entry in decks has two main parts:

decks:
  - attributes:
      icon: mdi:home
      name: Home
    card:
      type: entities
      entities:
        - light.lounge

Key	Description
attributes	Deck item metadata used by tabs and the editor.
card	The child Lovelace card config.

Attributes

Attribute	Description
name	Tab label.
icon	Tab icon.
default	Selects this tab on page load. Only one tab should be default.
width	Per-tab width when tab_width_mode is user.
tap_action	Optional tap action override for this deck item.
hold_action	Optional hold action override for this deck item.
double_tap_action	Optional double tap action override for this deck item.
padding_top	Optional top padding for this child card.
padding_bottom	Optional bottom padding for this child card.
padding_left	Optional left padding for this child card.
padding_right	Optional right padding for this child card.

Child Cards

Deck Card can contain Home Assistant cards and custom cards.

type: custom:orbit-deck-card
layout: wrap
decks:
  - attributes:
      name: Temperature
    card:
      type: thermostat
      entity: climate.lounge
  - attributes:
      name: Graph
    card:
      type: history-graph
      entities:
        - sensor.lounge_temperature

If the child card exposes a visual editor, Deck Card uses that editor. If not, Home Assistant falls back to YAML editing for that child card.

Interactions

Deck Card can override child card tap, hold, and double tap actions per deck item.

When no Deck Card interaction is configured, the child card keeps its own default action behaviour.

Deck Card interaction overrides are stored under the deck item's attributes.

type: custom:orbit-deck-card
layout: wrap
decks:
  - attributes:
      name: Energy
      tap_action:
        action: navigate
        navigation_path: /dashboard-energy
      hold_action:
        action: more-info
    card:
      type: custom:gauge-card-pro
      entity: sensor.main_import_power

Child card actions can still exist inside card when they belong to the child card itself:

decks:
  - attributes:
      name: Light
    card:
      type: tile
      entity: light.lounge
      tap_action:
        action: toggle

Styling

Deck Card supports shared styling for tabs and per-item styling for child card spacing.

type: custom:orbit-deck-card
layout: tabs
tab_color: primary-text-color
tab_active_color: primary-color
tab_background_color: card-background-color
tab_font_size: 18px
decks:
  - attributes:
      name: Home
    card:
      type: entities
      entities:
        - light.lounge

Per-item padding can be useful when a child card needs small layout correction:

decks:
  - attributes:
      padding_top: 5px
      padding_bottom: 0px
      padding_left: 0px
      padding_right: 0px
    card:
      type: custom:gauge-card-pro
      entity: sensor.main_import_power

Options

Option	Description
layout	wrap or tabs. Defaults to wrap.
decks	List of deck items. Each item contains attributes and card.
items_per_row	Wrap layout only. Number of child cards per row. Defaults to 1.
separate_cards	Wrap layout only. Adds spacing and individual child card surfaces.
tab_width_mode	Tabs layout only. equal, dynamic, or user.
tab_font_size	Tabs layout only. CSS font size for tab labels.
tab_color	Tabs layout only. Normal tab text/icon colour.
tab_active_color	Tabs layout only. Active tab text/icon and underline colour.
tab_background_color	Tabs layout only. Tab bar background colour.
attributes.tap_action	Optional per-item tap action override.
attributes.hold_action	Optional per-item hold action override.
attributes.double_tap_action	Optional per-item double tap action override.
attributes.padding_top	Optional per-item top padding.
attributes.padding_bottom	Optional per-item bottom padding.
attributes.padding_left	Optional per-item left padding.
attributes.padding_right	Optional per-item right padding.

Visual Editor

The Deck Card editor includes:

• Setup tab for layout, tab width, tab colours, and shared wrap controls.
• Card tab for deck item order, tab icon/name, default tab, child card editing, item styling, and interactions.
• Add, duplicate, delete, move left, and move right controls for deck items.
• Native child-card editor support where Home Assistant exposes one.