Views


To display cards on the UI you have to define them in views. Views sort cards in columns based on their card size. If you want to group some cards you have to use stack cards.

Views toolbar Use titles and icons to describe the content of views.

Configuration Variables

views

(list)(Required)A list of view configurations.

title

(string)(Required)The title or name.

badges

(list)(Optional)List of entities IDs to display as badge.

cards

(list)(Optional)Cards to display in this view.

id

(string)(Optional)IDs are used in the URL, more info below.

Default value: view index

icon

(string)(Optional)Icon-name from Material Design Icons.

panel

(boolean)(Optional)Renders the view in panel mode, more info below.

Default value: false

background

(string)(Optional)Style the background using CSS, more info below.

theme

(string)(Optional)Themes view and cards, more info below.

IDs

You can link to one view from another view by its ID. For this use cards that support navigation (navigation_path). Do not use special characters in IDs.

Example

View config:

- title: Living room
  # the final path is /lovelace/living_room
  id: living_room

Picture card config:

- type: picture
  image: /local/living_room.png
  navigation_path: /lovelace/living_room

Icons

If you define an icon the title will be used as a tooltip.

Example

- title: Garden
  icon: mdi:flower

Panel mode

This renders the first card on full width, other cards in this view will not be rendered. Good for cards like map, stack or picture-elements.

Example

- title: Map
  panel: true
  cards:
    - type: map
      entities:
        - device_tracker.demo_paulus
        - zone.home

Background

Style the background of views using CSS. For wallpapers you probably want to use the example below, more options can be found here.

Example

- title: Living room
  background: center / cover no-repeat url("/local/background.png") fixed

Themes

Set a separate theme for the view and its cards.

Example

- title: Home
  theme: happy