New Lovelace element 2021.8 (#18695)

source/_includes/asides/lovelace_navigation.html

@@ -1,10 +1,44 @@
 <section class="aside-module grid__item one-whole lap-one-half">
-  {% assign cards = site.lovelace | sort_natural: 'title' %}
+  {% assign elements = site.lovelace | sort_natural: 'title' %}
 
   <div class="section">
     <h1 class="title delta">Lovelace UI</h1>
     <ul class="divided sidebar-menu">
       <li>{% active_link /lovelace/ Introduction %}</li>
+      <li>
+        {% active_link /lovelace/dashboards/ Dashboards %}
+      </li>
+      <li>
+        {% active_link /lovelace/views/ Views %}
+      </li>
+      <li>
+        {% active_link /lovelace/cards/ Cards %}
+      </li>
+      <li>
+        {% active_link /lovelace/badges/ Badges %}
+      </li>
+    </ul>
+  </div>
+
+  <div class="section">
+    <h1 class="title delta">Views</h1>
+    <ul class="divided sidebar-menu">
+      {% for element in elements %}
+        {% if element.type == "view" %}
+          <li>{% active_link {{element.url}} {{element.sidebar_label}} %}</li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+  </div>
+
+  <div class="section">
+    <h1 class="title delta">Cards</h1>
+    <ul class="divided sidebar-menu">
+      {% for element in elements %}
+        {% if element.type == "card" %}
+          <li>{% active_link {{element.url}} {{element.sidebar_label}} %}</li>
+        {% endif %}
+      {% endfor %}
     </ul>
   </div>
 
@@ -12,10 +46,6 @@
     <h1 class="title delta">Advanced</h1>
     <ul class="divided sidebar-menu">
       <li>{% active_link /lovelace/header-footer/ Headers & Footers %}</li>
-      <li>
-        {% active_link /lovelace/dashboards-and-views/ Dashboards & Views %}
-      </li>
-      <li>{% active_link /lovelace/badges/ Badges %}</li>
       <li>{% active_link /lovelace/actions/ Actions %}</li>
       <li>
         <a
@@ -26,13 +56,4 @@
       </li>
     </ul>
   </div>
-
-  <div class="section">
-    <h1 class="title delta">Cards</h1>
-    <ul class="divided sidebar-menu">
-      {% for card in cards %}
-      <li>{% active_link {{card.url}} {{card.sidebar_label}} %}</li>
-      {% endfor %}
-    </ul>
-  </div>
 </section>

source/_lovelace/alarm-panel.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Alarm Panel Card"
 sidebar_label: Alarm Panel
 description: "The Alarm Panel card allows you to arm and disarm your alarm control panel integrations."

source/_lovelace/button.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Button Card"
 sidebar_label: Button
 description: "The Button card allows you to add buttons to perform tasks."

source/_lovelace/calendar.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Calendar Card"
 sidebar_label: Calendar
 description: "The calendar card displays your calendar entities in a month, day and list view"

source/_lovelace/conditional.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: Conditional Card
 sidebar_label: Conditional
 description: The Conditional card displays another card based on entity states.

source/_lovelace/energy.markdown

@@ -0,0 +1,127 @@
+---
+type: card
+title: "Energy Cards"
+sidebar_label: Energy Cards
+description: "An overview of the energy cards that are available."
+---
+
+This is a list of all the cards used in the energy dashboard, you can also place them anywhere you want in your Lovelace dashboard.
+
+At the moment there are no configuration options available for these cards, you can configure them on the energy {% my config_energy title="energy configuration page" %}.
+
+They will always show the data of today when used outside the energy dashboard.
+
+## Energy usage graph
+
+<p class='img'>
+  <img src='/images/lovelace/energy/usage-graph.png' alt='Screenshot of the energy usage graph card'>
+  Screenshot of the Energy usage graph card.
+</p>
+
+The energy usage graph card shows the amount of energy your house has consumed, and from what source this energy came.
+It will also show the amount of energy your have returned to the grid.
+
+#### Example
+```yaml
+type: energy-usage-graph
+```
+
+## Solar production graph
+
+<p class='img'>
+  <img src='/images/lovelace/energy/solar-graph.png' alt='Screenshot of the solar graph card'>
+  Screenshot of the Solar production graph card.
+</p>
+
+The solar production graph card shows the amount of energy your solar panels have produced per source, and if setup and available the forecast of the solar production.
+
+#### Example
+```yaml
+type: energy-solar-graph
+```
+
+## Energy distribution
+
+<p class='img'>
+  <img src='/images/lovelace/energy/distribution.png' alt='Screenshot of the energy distribution card'>
+  Screenshot of the Energy distribution card.
+</p>
+
+The energy distribution card shows how the energy flowed, from the grid to your house, from your solar panels to your house and/or back to the grid.
+If setup, it will also tell you how many kWh of the energy you got from the grid was produced without using fossil fuels.
+
+#### Example
+```yaml
+type: energy-distribution
+```
+
+## Energy sources table
+
+<p class='img'>
+  <img src='/images/lovelace/energy/sources-table.png' alt='Screenshot of the energy sources table card'>
+  Screenshot of the Energy sources table card.
+</p>
+
+The energy sources table card shows all your energy sources, and the corresponding amount of energy.
+If setup, it will also show the costs and compensation per source and the total.
+
+#### Example
+```yaml
+type: energy-sources-table
+```
+
+## Grid neutrality gauge
+
+<p class='img'>
+  <img src='/images/lovelace/energy/grid-neutrality-gauge.png' alt='Screenshot of the grid neutrality gauge card'>
+  Screenshot of the Grid neutrality gauge card.
+</p>
+
+The grid neutrality gauge card represents your energy dependency. If it's green, it means you produced more energy than that you consumed from the grid. If it's in the red, it means that you relied on the grid for part of your home's energy consumption.
+
+#### Example
+```yaml
+type: energy-grid-neutrality-gauge
+```
+
+## Solar consumed gauge
+
+<p class='img'>
+  <img src='/images/lovelace/energy/solar-consumed-gauge.png' alt='Screenshot of the solar consumed gauge card'>
+  Screenshot of the Solar consumed gauge card.
+</p>
+
+The solar consumed gauge represents how much of the solar energy was not used by your home and was returned to the grid. If you frequently return a lot, try to conserve this energy by installing a battery or buying an electric car to charge.
+
+#### Example
+```yaml
+type: energy-solar-consumed-gauge
+```
+
+## Carbon consumed gauge
+
+<p class='img'>
+  <img src='/images/lovelace/energy/carbon-consumed-gauge.png' alt='Screenshot of the carbon consumed gauge card'>
+  Screenshot of the Carbon consumed gauge card.
+</p>
+
+The carbon consumed gauge card represents how much of the energy consumed by your home was generated using non-fossil fuels like solar, wind and nuclear. It includes the solar energy you generated your self.
+
+#### Example
+```yaml
+type: energy-carbon-consumed-gauge
+```
+
+## Devices energy graph
+
+<p class='img'>
+  <img src='/images/lovelace/energy/devices-graph.png' alt='Screenshot of the devices energy graph card'>
+  Screenshot of the devices energy graph card.
+</p>
+
+The devices energy graph show the energy usage per device, it is sorted by usage.
+
+#### Example
+```yaml
+type: energy-devices-graph
+```

source/_lovelace/entities.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Entities Card"
 sidebar_label: Entities
 description: "The Entities card is the most common type of card. It groups items together into lists."

source/_lovelace/entity-filter.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Entity Filter Card"
 sidebar_label: Entity Filter
 description: "The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state. Very useful for showing lights that you forgot to turn off or show a list of people only when they're at home. "

source/_lovelace/entity.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Entity Card"
 sidebar_label: Entity
 description: "The Entity card gives you a quick overview of your entity's state"

source/_lovelace/gauge.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Gauge Card"
 sidebar_label: Gauge
 description: "The Gauge card is a basic card that allows visually seeing sensor data."
@@ -11,6 +12,11 @@ The Gauge card is a basic card that allows visually seeing sensor data.
 Screenshot of the Gauge card.
 </p>
 
+<p class='img'>
+<img src='/images/lovelace/lovelace_gauge_needle_card.png' alt='Screenshot of the Gauge card in needle mode'>
+Screenshot of the Gauge card in needle mode.
+</p>
+
 To add the Gauge card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Gauge** from the card picker. All options for this card can be configured via the user interface.
 
 Alternatively, the card can be configured using YAML:
@@ -53,6 +59,11 @@ max:
   description: Maximum value for graph.
   type: integer
   default: 100
+needle:
+  required: false
+  description: Show the gauge as a needle gauge.
+  type: boolean
+  default: false
 severity:
   required: false
   description: Allows setting of colors for different numbers.

source/_lovelace/glance.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Glance Card"
 sidebar_label: Glance
 description: "The Glance card is useful to group multiple sensors in a compact overview."

source/_lovelace/grid.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Grid Card"
 sidebar_label: Grid
 description: "The Grid card allows you to show multiple cards in a grid."

source/_lovelace/history-graph.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "History Graph Card"
 sidebar_label: History Graph
 description: "The History Graph card allows you to display a graph for each of the entities listed."

source/_lovelace/horizontal-stack.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Horizontal Stack Card"
 sidebar_label: Horizontal Stack
 description: "The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."

source/_lovelace/humidifier.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Humidifier Card"
 sidebar_label: Humidifier
 description: "The Humidifier card gives control of your humidifier entity, allowing you to change the target humidity and mode of the entity."

source/_lovelace/iframe.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Webpage Card"
 sidebar_label: Webpage
 description: "The Webpage card allows you to embed your favorite webpage right into Home Assistant."

source/_lovelace/light.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Light Card"
 sidebar_label: Light
 description: "The Light card allows you to change the brightness of the light."

source/_lovelace/logbook.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Logbook Card"
 sidebar_label: Logbook
 description: "The Logbook card displays entries from the logbook for specific entities."

source/_lovelace/map.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Map Card"
 sidebar_label: Map
 description: "The Map card that allows you to display entities on a map"

source/_lovelace/markdown.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Markdown Card"
 sidebar_label: Markdown
 description: "The Markdown card is used to render Markdown"

source/_lovelace/masonary.markdown

@@ -0,0 +1,16 @@
+---
+type: view
+title: Masonary View
+sidebar_label: Masonary (default)
+description: "The default panel layout uses a masonary algorithme."
+---
+
+The masonary view is the default view type.
+It sorts cards in columns based on their `card size`. If you want to group some cards you have to use `stack` cards.
+
+{% configuration %}
+type:
+  required: false
+  description: "`masonary`"
+  type: string
+{% endconfiguration %}

source/_lovelace/media-control.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Media Control Card"
 sidebar_label: Media Control
 description: "The Media Control card is used to display media player entities on an interface with easy to use controls."

source/_lovelace/panel.markdown

@@ -0,0 +1,19 @@
+---
+type: view
+title: Panel View
+sidebar_label: Panel
+description: "The panel view shows 1 card in the fullwidth of the screen."
+---
+
+In this view the first card is rendered full-width, other cards in the view will not be rendered. 
+
+This view doesn't have support for badges.
+
+This mode is good when using cards like `map`, `stack` or `picture-elements`.
+
+{% configuration %}
+type:
+  required: true
+  description: "`panel`"
+  type: string
+{% endconfiguration %}

source/_lovelace/picture-elements.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Picture Elements Card"
 sidebar_label: Picture Elements
 description: "The Picture Elements card is one of the most versatile types of cards. The cards allow you to position icons or text and even services! On an image based on coordinates."

source/_lovelace/picture-entity.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: Picture Entity Card
 sidebar_label: Picture Entity
 description: The Picture Entity card displays an entity in the form of an image. Instead of images from URL, it can also show the picture of camera entities.

source/_lovelace/picture-glance.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Picture Glance Card"
 sidebar_label: Picture Glance
 description: "The Picture Glance card shows an image and corresponding entity states as an icon. The entities on the right side allow toggle actions, others show the more information dialog."

source/_lovelace/picture.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Picture Card"
 sidebar_label: Picture
 description: "The Picture card allows you to set an image to use for navigation to various paths in your interface or to call a service."

source/_lovelace/plant-status.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Plant Status Card"
 sidebar_label: Plant Status
 description: "The Plant Status card is for all the lovely botanists out there."

source/_lovelace/sensor.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Sensor Card"
 sidebar_label: Sensor
 description: "The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time."

source/_lovelace/shopping-list.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Shopping List Card"
 sidebar_label: Shopping List
 description: "The Shopping List card allows you to add, edit, check-off, and clear items from your shopping list."

source/_lovelace/sidebar.markdown

@@ -0,0 +1,47 @@
+---
+type: view
+title: Sidebar View
+sidebar_label: Sidebar
+description: "The sidebar view has 2 columns, a wide one and a smaller one on the right."
+---
+
+The sidebar view has 2 columns, a wide one and a smaller one on the right.
+
+This view doesn't have support for badges.
+
+To change a view to edit mode, or to change the location of a card, enable edit mode:
+Click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**.
+
+You can set if a card should be placed in the main (left) column of the sidebar column (right), by pressing the arrow right or left arrow in the bar underneath the card.
+
+On mobile all cards are rendered in 1 column and kept in the order of the cards in the config.
+
+## View config:
+
+{% configuration %}
+type:
+  required: true
+  description: "`sidebar`"
+  type: string
+{% endconfiguration %}
+
+#### Example
+
+Alternatively, the position of the card can be configured using YAML with the `view_layout` option:
+
+```yaml
+type: entities
+entities: 
+  - media_player.lounge_room
+view_layout:
+  position: sidebar
+```
+
+## Cards config:
+
+{% configuration %}
+view_layout.position:
+  required: false
+  description: "The position of the card, `main` or `sidebar`"
+  type: string
+{% endconfiguration %}

source/_lovelace/statistics-graph.markdown

@@ -0,0 +1,76 @@
+---
+type: card
+title: "Statistics Graph Card"
+sidebar_label: Statistics Graph
+description: "The Statistics Graph card allows you to display a graph with statistics data for each of the entities listed."
+---
+
+The Statistics Graph card allows you to display a graph of statistics data for each of the entities listed. To learn more about statistics and what is supported, check out the [statistics](/integrations/statistics/) documentation.
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_statistics_graph_line.png' alt='Screenshot of the statistics graph card for power entities'>
+Screenshot of the Statistics Graph card with none metered entities and `chart_type` `line`.
+</p>
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_statistics_graph_bar.png' alt='Screenshot of the statistics graph card for energy entities'>
+Screenshot of the Statistics Graph card with a metered entity and `chart_type` `bar`.
+</p>
+
+To add the Statistics Graph card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the "Add Card" button in the bottom right corner and select **Statistics Graph** from the card picker. All options for this card can be configured via the user interface.
+
+{% configuration %}
+type:
+  required: true
+  description: statistics-graph
+  type: string
+entities:
+  required: true
+  description: "A list of entity IDs or `entity` objects, see below."
+  type: list
+days_to_show:
+  required: false
+  description: Days to show in graph. Minimum is 1 day.
+  type: integer
+  default: 30
+chart_type:
+  required: false
+  description: If the chart should be rendered as a `bar` or a `line` chart.
+  type: string
+state_types:
+  required: false
+  description: The stat types to render. `min`, `max`, `mean`, `sum`
+  type: list
+title:
+  required: false
+  description: The card title.
+  type: string
+{% endconfiguration %}
+
+## Options For Entities
+
+If you define entities as objects instead of strings, you can add more customization and configuration:
+
+{% configuration %}
+entity:
+  required: true
+  description: Entity ID.
+  type: string
+name:
+  required: false
+  description: Overwrites friendly name.
+  type: string
+{% endconfiguration %}
+
+## Example
+
+Alternatively, the card can be configured using YAML:
+
+```yaml
+type: statistics-graph
+title: 'My Graph'
+entities:
+  - sensor.outside_temperature
+  - entity: sensor.inside_temperature
+    name: Inside
+```

source/_lovelace/thermostat.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Thermostat Card"
 sidebar_label: Thermostat
 description: "The Thermostat card gives control of your climate entity, allowing you to change the temperature and mode of the entity."

source/_lovelace/vertical-stack.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Vertical Stack Card"
 sidebar_label: Vertical Stack
 description: "The Vertical Stack card allows you to group multiple cards so they always sit in the same column."

source/_lovelace/weather-forecast.markdown

@@ -1,4 +1,5 @@
 ---
+type: card
 title: "Weather Forecast Card"
 sidebar_label: Weather Forecast
 description: "The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall."

source/lovelace/badges.markdown

@@ -1,5 +1,5 @@
 ---
-title: "Lovelace Badges"
+title: "Badges"
 description: "Description of the various badges that are available."
 ---
 

source/lovelace/cards.markdown

@@ -0,0 +1,8 @@
+---
+title: "Cards"
+description: "Lovelace cards."
+---
+
+The cards are the what the interface of your Lovelace dashboard.
+
+There are a lot of card types, each with it's own configuration options.

source/lovelace/dashboards.markdown

@@ -1,5 +1,5 @@
 ---
-title: "Dashboards and Views"
+title: "Dashboards"
 description: "The Lovelace UI is a powerful and configurable interface for Home Assistant."
 ---
 
@@ -7,7 +7,7 @@ You can define multiple dashboards in Lovelace. Each dashboard can be added to t
 
 You can manage your dashboards via the user interface. Go to **Configuration** -> **Lovelace Dashboards**. Here you can see all defined dashboards and create new ones.
 
-### Using YAML for the default dashboard
+## Using YAML for the default dashboard
 
 To change the default dashboard, create a new file `ui-lovelace.yaml` in your configuration directory and add the following section to your `configuration.yaml` and restart Home Assistant:
 
@@ -29,7 +29,7 @@ When you make changes to `ui-lovelace.yaml`, you don't have to restart Home Assi
 
 To revert back to using the UI to edit your Lovelace interface, remove the `lovelace` section from your `configuration.yaml` and copy the contents of your `ui-lovelace.yaml` into the raw configuration section of Home Assistant and restart.
 
-### Adding more dashboards with YAML
+## Adding more dashboards with YAML
 
 It is also possible to use YAML to define multiple dashboards. Each dashboard will be loaded from its own YAML file.
 
@@ -192,185 +192,3 @@ views:
         content: >
           Welcome to your **Lovelace UI**.
 ```
-
-### 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.
-
-<p class="img">
-  <img src="/images/lovelace/lovelace_views.png" alt="Views toolbar">
-  Use titles and icons to describe the content of views.
-</p>
-
-{% 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 or `badge` objects to display as badges. Note that badges do not show when view is in panel mode.
-      type: list
-    cards:
-      required: false
-      description: Cards to display in this view.
-      type: list
-    path:
-      required: false
-      description: Paths are used in the URL, more info below.
-      type: string
-      default: view index
-    icon:
-      required: false
-      description: Icon-name from Material Design Icons. You can use any icon from [MaterialDesignIcons.com](http://materialdesignicons.com). Prefix the icon name with `mdi:`, ie `mdi:home`.
-      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
-    visible:
-      required: false
-      description: "Hide/show the view tab from all users or a list of individual `visible` objects."
-      type: [boolean, list]
-      default: true
-{% endconfiguration %}
-
-#### Example
-
-View configuration:
-
-```yaml
-- title: Living room
-  badges:
-    - device_tracker.demo_paulus
-    - entity: light.ceiling_lights
-      name: Ceiling Lights
-      icon: mdi:bulb
-    - entity: switch.decorative_lights
-      image: /local/lights.png
-```
-
-## Path
-
-You can link to one view from a card in another view when using cards that support navigation (`navigation_path`). The string supplied here will be appended to the string `/lovelace/` to create the path to the view. Do not use special characters in paths. Do not begin a path with a number. This will cause the parser to read your path as a view index.
-
-#### Example
-
-View configuration:
-
-```yaml
-- title: Living room
-  # the final path is /lovelace/living_room
-  path: living_room
-```
-
-Picture card configuration:
-
-```yaml
-- type: picture
-  image: /local/living_room.png
-  tap_action:
-    action: navigate
-    navigation_path: /lovelace/living_room
-```
-
-## View icon
-
-If you define a view icon, the icon instead of the title will be displayed, the title will then be used as a tool-tip.
-
-#### Example
-
-```yaml
-- title: Garden
-  icon: mdi:flower
-```
-
-## Visible
-
-You can specify the visibility of views as a whole or per-user. (Note: This is only for the display of the tabs. The URL path is still accessible)
-
-#### Example
-
-```yaml
-views:
-  - title: Ian
-    visible:
-      - user: 581fca7fdc014b8b894519cc531f9a04
-    cards:
-      ...
-  - title: Chelsea
-    visible:
-      - user: 6e690cc4e40242d2ab14cf38f1882ee6
-    cards:
-      ...
-  - title: Admin
-    visible: db34e025e5c84b70968f6530823b117f
-    cards:
-      ...
-```
-
-### Options For Visible
-
-If you define `visible` as objects instead of a boolean to specify conditions for displaying the view tab:
-
-{% configuration badges %}
-user:
-  required: true
-  description: User ID that can see the view tab (unique hex value found on the Users configuration page).
-  type: string
-{% endconfiguration %}
-
-## Panel
-
-Setting panel true sets the view to panel mode. In this mode the first card is rendered full-width, other cards in the view will not be rendered. This mode is good when using cards like `map`, `stack` or `picture-elements`. Note that badges will not appear in Panel Mode.
-
-#### Example
-
-```yaml
-- title: Map
-  panel: true
-  cards:
-    - type: map
-      entities:
-        - device_tracker.demo_paulus
-        - zone.home
-```
-
-## Theme
-
-Set a separate [theme](/integrations/frontend/#themes) for the view and its cards.
-
-#### Example
-
-```yaml
-- title: Home
-  theme: happy
-```
-
-## Background
-
-You can style the background of your views with a [theme](/integrations/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
-
-#### Example
-
-```yaml
-# Example configuration.yaml entry
-frontend:
-  themes:
-    example:
-      lovelace-background: center / cover no-repeat url("/local/background.png") fixed
-```

source/lovelace/views.markdown

@@ -0,0 +1,188 @@
+---
+title: "Views"
+description: "A Lovelace view is a tab inside a Lovelace dashboard."
+---
+
+A View is a tab inside a Lovelace dashboard.
+To display cards on the UI you have to define them in views.
+
+You can add a view to your user interface, by clicking the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. 
+Click the `+` button in the top menu bar.
+
+<p class="img">
+  <img src="/images/lovelace/lovelace_views.png" alt="Views toolbar">
+  Use titles and icons to describe the content of views.
+</p>
+
+## Path
+
+You can link to one view from a card in another view when using cards that support navigation (`navigation_path`). The string supplied here will be appended to the string `/lovelace/` to create the path to the view. Do not use special characters in paths. Do not begin a path with a number. This will cause the parser to read your path as a view index.
+
+#### Example
+
+View configuration:
+
+```yaml
+- title: Living room
+  # the final path is /lovelace/living_room
+  path: living_room
+```
+
+Picture card configuration:
+
+```yaml
+- type: picture
+  image: /local/living_room.png
+  tap_action:
+    action: navigate
+    navigation_path: /lovelace/living_room
+```
+
+## View icon
+
+If you define a view icon, the icon instead of the title will be displayed, the title will then be used as a tool-tip.
+
+#### Example
+
+```yaml
+- title: Garden
+  icon: mdi:flower
+```
+
+## Visible
+
+You can specify the visibility of views as a whole or per-user. (Note: This is only for the display of the tabs. The URL path is still accessible)
+
+#### Example
+
+```yaml
+views:
+  - title: Ian
+    visible:
+      - user: 581fca7fdc014b8b894519cc531f9a04
+    cards:
+      ...
+  - title: Chelsea
+    visible:
+      - user: 6e690cc4e40242d2ab14cf38f1882ee6
+    cards:
+      ...
+  - title: Admin
+    visible: db34e025e5c84b70968f6530823b117f
+    cards:
+      ...
+```
+
+### Options For Visible
+
+If you define `visible` as objects instead of a boolean to specify conditions for displaying the view tab:
+
+{% configuration badges %}
+user:
+  required: true
+  description: User ID that can see the view tab (unique hex value found on the Users configuration page).
+  type: string
+{% endconfiguration %}
+
+## Type
+
+You can change the layout of a view by using a different view type. The default is [`masonry`](/lovelace/masonry).
+
+#### Example
+
+```yaml
+- title: Map
+  type: panel
+  cards:
+    - type: map
+      entities:
+        - device_tracker.demo_paulus
+        - zone.home
+```
+
+## Theme
+
+Set a separate [theme](/integrations/frontend/#themes) for the view and its cards.
+
+#### Example
+
+```yaml
+- title: Home
+  theme: happy
+```
+
+## Background
+
+You can style the background of your views with a [theme](/integrations/frontend/#themes). You can use the CSS variable `lovelace-background`. For wallpapers you probably want to use the example below, more options can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
+
+#### Example
+
+```yaml
+# Example configuration.yaml entry
+frontend:
+  themes:
+    example:
+      lovelace-background: center / cover no-repeat url("/local/background.png") fixed
+```
+
+{% configuration views %}
+views:
+  required: true
+  description: A list of view configurations.
+  type: list
+  keys:
+    type:
+      required: false
+      description: The type of the view.
+      type: string
+      default: masonry
+    title:
+      required: true
+      description: The title or name.
+      type: string
+    badges:
+      required: false
+      description: List of entities IDs or `badge` objects to display as badges. Note that badges do not show when view is in panel mode.
+      type: list
+    cards:
+      required: false
+      description: Cards to display in this view.
+      type: list
+    path:
+      required: false
+      description: Paths are used in the URL, more info below.
+      type: string
+      default: view index
+    icon:
+      required: false
+      description: Icon-name from Material Design Icons. You can use any icon from [MaterialDesignIcons.com](http://materialdesignicons.com). Prefix the icon name with `mdi:`, ie `mdi:home`.
+      type: string
+    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
+    visible:
+      required: false
+      description: "Hide/show the view tab from all users or a list of individual `visible` objects."
+      type: [boolean, list]
+      default: true
+{% endconfiguration %}
+
+#### Example
+
+View configuration:
+
+```yaml
+- title: Living room
+  badges:
+    - device_tracker.demo_paulus
+    - entity: light.ceiling_lights
+      name: Ceiling Lights
+      icon: mdi:bulb
+    - entity: switch.decorative_lights
+      image: /local/lights.png
+```