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 was added in Orbit Cards v0.14.0.

Layouts

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

Wrap Layout

Light theme	Dark theme

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

Home	Energy	Climate

type: custom:orbit-deck-card
layout: tabs
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. The default is equal.

If more than one deck item is marked as default, the first default item wins.

Tab Width Modes

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

Example with a custom tab width:

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

Tabbed Card Compatibility

Deck Card is compatible with the same basic item shape used by custom:tabbed-card.

For a simple tabbed-card config, change:

type: custom:tabbed-card
tabs:
  - attributes:
      icon: mdi:home
      label: Home
    card:
      type: entities
      entities:
        - light.lounge

to:

type: custom:orbit-deck-card
layout: tabs
decks:
  - attributes:
      icon: mdi:home
      label: Home
    card:
      type: entities
      entities:
        - light.lounge

Deck Card accepts attributes.label from tabbed-card configs. When the visual editor opens the card, it saves that value back as attributes.name.

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 is owned by Deck Card. card is passed to Home Assistant as a normal Lovelace card.

Attributes

Attribute	Description
name	Tab label.
label	Tab label accepted from tabbed-card configs. The editor saves it as name.
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 custom.
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.
force_padding	Forces Deck Card padding values to override child-card padding support.
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.

Cards that already have their own layout controls should usually keep those controls inside the child card. Use Deck Card padding only when you need the deck item itself to add spacing around the child.

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

Priority:

1. Deck Card uses the interaction configured in attributes when it exists.
2. If no Deck Card interaction is configured, the child card keeps its own configured/default action.

This means you can leave Deck Card interactions unset for normal child-card behaviour, then override only the specific deck items that need different tap, hold, or double tap actions.

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:
      force_padding: true
      padding_top: 5px
      padding_bottom: 0px
      padding_left: 0px
      padding_right: 0px
    card:
      type: custom:gauge-card-pro
      entity: sensor.main_import_power

Padding values are stored on each deck item's attributes.

force_padding: true is useful when a child card exposes its own padding support and Deck Card should override it. When force_padding is not enabled, child cards with their own padding support can keep control of their internal spacing.

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 custom. Defaults to equal.
tab_font_size	Tabs layout only. CSS font size for tab labels.
tab_color	Tabs layout only. Inactive colour.
tab_active_color	Tabs layout only. Active colour and underline colour.
tab_background_color	Tabs layout only. 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.force_padding	Forces Deck Card padding to override child-card padding support.
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, 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.

The live preview follows the selected deck item while editing.