Configuration

Universal Card is easiest to configure in layers:

define the shell
choose how the body opens
add layout
add rules and actions
add styling only where it improves the dashboard

Minimal card

type: custom:universal-card
title: Example
body:
  cards:
    - type: markdown
      content: Hello

Common shell fields

Field	Purpose
`title`, `subtitle`	Main header copy
`icon`, `icon_color`	Header icon and optional color
`entity`, `attribute`	Entity-backed title, styles, and rules
`theme`	Built-in visual preset
`padding`, `border_radius`	Base shell spacing and shape
`expanded`	Start opened or collapsed
`show_state`	Show the entity state in the header
`show_expand_icon`, `expand_icon`	Expand affordance

Main sections

Section	Purpose
`header`	Header behavior and layout presets
`header_left`, `header_right`	Side slot cards in the header
`badges`	Header chips with values, rules, and actions
`body`	Nested Lovelace cards
`body_mode`	How the body is shown
`grid`	Shared card layout rules
`footer`	Supporting cards and actions
`footer_left`, `footer_right`	Side slot cards in the footer
`visibility`, `section_visibility`	Show or hide card regions
`swipe`	Directional gesture actions
`theme_tokens`, `state_styles`, `custom_css`	Styling layers

Body mode quick picker

Mode	Best for	Main docs
`expand`	inline drill-down	Body Modes Layout
`modal`	focused detail overlays	Modal Layout
`fullscreen`	large media and immersive dashboards	Body Modes Layout
`tabs`	grouped content inside one card	Body Modes Layout
`carousel`	slide-based navigation	Body Modes Layout
`subview`	jump to a dedicated Lovelace view	Body Modes Layout
`none`	header-only status cards	Examples Gallery

Starter templates

Expand with grid

type: custom:universal-card
title: Overview
icon: mdi:view-dashboard
body_mode: expand
grid:
  columns: 2
  gap: 12px
body:
  cards:
    - type: entities
      entities:
        - entity: sensor.demo_temperature
        - entity: sensor.demo_humidity
    - type: entities
      entities:
        - entity: sensor.network_health_sensor
        - entity: input_select.house_mode

type: custom:universal-card
title: Security
icon: mdi:shield-home
body_mode: modal
modal:
  width: auto
  max_width: 72rem
  max_height: 85vh
  loading_strategy: lazy
body:
  cards:
    - type: entities
      entities:
        - entity: input_boolean.security_armed
        - entity: sensor.security_status

Header with badges

type: custom:universal-card
title: Living Room
subtitle: Lights and comfort
icon: mdi:sofa
header:
  layout:
    variant: stacked
    badges_position: below_content
badges:
  - type: state
    entity: input_boolean.kitchen_light
    icon: mdi:lightbulb
    label: Main light
    color_rules:
      - operator: ==
        value: 'on'
        color: gold
      - operator: ==
        value: 'off'
        color: gray
body:
  cards:
    - type: entities
      entities:
        - entity: input_boolean.kitchen_light