home-assistant.io/source/lovelace/views.markdown

layout, title, description, date, sidebar, comments, sharing, footer

layout	title	description	date	sidebar	comments	sharing	footer
page	Views	The Lovelace UI is a powerful and configurable interface for Home Assistant.	2018-07-01 10:28 +00:00	true	false	true	true

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.

Use titles and icons to describe the content of views.

{% configuration views %} views: required: true description: A list of view configurations. type: list keys: title: required: true description: The title or name. type: string badges: required: false description: List of entities IDs to display as badge. type: list cards: required: false description: Cards to display in this view. type: list id: required: false description: IDs are used in the URL, more info below. type: string default: view index icon: required: false description: Icon-name from Material Design Icons. type: string panel: required: false description: Renders the view in panel mode, more info below. type: boolean default: "false" background: required: false description: Style the background using CSS, more info below. type: string theme: required: false description: Themes view and cards, more info below. type: string {% endconfiguration %}

{% linkable_title 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.

{% linkable_title 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

{% linkable_title Icons %}

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

{% linkable_title Example %}

- title: Garden
  icon: mdi:flower

{% linkable_title 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.

{% linkable_title Example %}

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

{% linkable_title Background %}

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

{% linkable_title Example %}

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

{% linkable_title Themes %}

Set a separate theme for the view and its cards.

{% linkable_title Example %}

- title: Home
  theme: happy