Universal Card GitHub Pages Docs
Universal Card Docs

Features

Feature Map

User-facing map of the Universal Card feature surface, with links to examples and focused guides.

Feature Map

This page answers three practical questions:

  1. what the card can do
  2. where to find an example
  3. where to find the focused guide for that area
Preview model. GitHub Pages is static, so visual examples use real Home Assistant captures instead of simulated renders.

Primary docs

Examples Gallery

Copyable YAML for every major visual and behavioral area of the card.

Configuration

Start here for structure, starter templates, and field groups.

YAML Block Reference

Block-by-block reference for root fields, badges, body mode blocks, styling, actions, and runtime settings.

Field Matrix

Fast lookup for field groups, editor coverage, and the best doc or example to follow.

Grid Layout

How to use columns, gaps, colspan, and rowspan for expandable, modal, fullscreen, and tabbed layouts.

Footer

Footer text, slot cards, action buttons, and secondary controls.

Visibility

Whole-card, section-level, and badge-level conditional rendering.

Actions And Gestures

Tap, hold, double-tap, context menu, footer actions, and swipe gestures.

Recipes by Use Case

Starter configurations grouped by real dashboard needs such as climate, security, media, wall panels, and admin tools.

Custom CSS Recipes

Ready-to-use styling snippets for shell, header, badges, footer, tabs, modal, and fullscreen surfaces.

Theming Guide

How to choose between theme, icon_color, theme_tokens, state_styles, and custom_css without overengineering the config.

Selector Catalog

Official CSS hooks and stable selectors you can target with custom_css without guessing the DOM.

Modal Layout

Overlay sizing, spacing, mobile behavior, and modal-specific loading.

Body Modes Layout

Expand, fullscreen, tabs, carousel, subview, and header-only cards.

Header Layout

Header variants, spacing, alignment, slot usage, and badge placement.

Badges

Badge types, visibility rules, color rules, icon-only mode, and actions.

Loading Strategy

When to use lazy loading, preload, and runtime-safety settings.

Editor

Visual editor coverage, best-fit workflows, and YAML-first areas.

Coverage map

Area Best entry point
Basic card setup Configuration
Ready-to-copy YAML Examples Gallery
Block-by-block field lookup YAML Block Reference
Fast field support lookup Field Matrix
Grid composition Grid Layout
Footer actions and support content Footer
Conditional rendering Visibility
Actions, menus, and gestures Actions And Gestures
Room or dashboard scenario recipes Recipes by Use Case
Styling recipes Custom CSS Recipes
Styling decision guide Theming Guide
Stable CSS hooks and selectors Selector Catalog
Modal overlays Modal Layout
Fullscreen, tabs, carousel, subview Body Modes Layout
Header arrangement Header Layout
Badge rules and icon-only mode Badges
Performance and loading Loading Strategy
Visual editor Editor
Release highlights Release Notes

Main capability groups

Layout

  • 7 body modes: expand, modal, fullscreen, tabs, carousel, subview, none
  • shared grid layout with card spans
  • nested Lovelace cards in header, body, and footer
  • configurable header variants and badge placement

Rules and interaction

  • tap, hold, and double-tap actions
  • badge-level actions
  • root and section visibility
  • swipe gestures
  • optional context menus

Styling

  • built-in themes
  • icon_color
  • theme_tokens
  • state_styles
  • custom_css
  • spacing and sizing controls for body modes and header layouts

Runtime and editor

  • inline lazy loading
  • modal lazy vs preload
  • persistence and stability controls
  • visual editor with mode-aware settings and nested rule builders