diff --git a/source/_includes/asides/lovelace_navigation.html b/source/_includes/asides/lovelace_navigation.html
index 47f23ade87e..08cc065b9ef 100644
--- a/source/_includes/asides/lovelace_navigation.html
+++ b/source/_includes/asides/lovelace_navigation.html
@@ -1,10 +1,44 @@
- {% assign cards = site.lovelace | sort_natural: 'title' %}
+ {% assign elements = site.lovelace | sort_natural: 'title' %}
Lovelace UI
+
+
+
+
Views
+
+
+
+
+
Cards
+
@@ -12,10 +46,6 @@
Advanced
-
-
-
Cards
-
-
diff --git a/source/_lovelace/alarm-panel.markdown b/source/_lovelace/alarm-panel.markdown
index 1288e296f4f..f0c773dfdb7 100644
--- a/source/_lovelace/alarm-panel.markdown
+++ b/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."
diff --git a/source/_lovelace/button.markdown b/source/_lovelace/button.markdown
index c7dca136f75..14ed2b2e819 100644
--- a/source/_lovelace/button.markdown
+++ b/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."
diff --git a/source/_lovelace/calendar.markdown b/source/_lovelace/calendar.markdown
index 6b5d084212d..b5fb73da00b 100644
--- a/source/_lovelace/calendar.markdown
+++ b/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"
diff --git a/source/_lovelace/conditional.markdown b/source/_lovelace/conditional.markdown
index b8fe0369d86..df73887cdc3 100644
--- a/source/_lovelace/conditional.markdown
+++ b/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.
diff --git a/source/_lovelace/energy.markdown b/source/_lovelace/energy.markdown
new file mode 100644
index 00000000000..4b91455242e
--- /dev/null
+++ b/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
+
+
+ 
+ Screenshot of the Energy usage graph card.
+
+
+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
+
+
+ 
+ Screenshot of the Solar production graph card.
+
+
+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
+
+
+ 
+ Screenshot of the Energy distribution card.
+
+
+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
+
+
+ 
+ Screenshot of the Energy sources table card.
+
+
+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
+
+
+ 
+ Screenshot of the Grid neutrality gauge card.
+
+
+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
+
+
+ 
+ Screenshot of the Solar consumed gauge card.
+
+
+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
+
+
+ 
+ Screenshot of the Carbon consumed gauge card.
+
+
+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
+
+
+ 
+ Screenshot of the devices energy graph card.
+
+
+The devices energy graph show the energy usage per device, it is sorted by usage.
+
+#### Example
+```yaml
+type: energy-devices-graph
+```
\ No newline at end of file
diff --git a/source/_lovelace/entities.markdown b/source/_lovelace/entities.markdown
index 8a6fc8db5d9..18c81656924 100644
--- a/source/_lovelace/entities.markdown
+++ b/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."
diff --git a/source/_lovelace/entity-filter.markdown b/source/_lovelace/entity-filter.markdown
index 8605d34b89b..0e62325fe56 100644
--- a/source/_lovelace/entity-filter.markdown
+++ b/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. "
diff --git a/source/_lovelace/entity.markdown b/source/_lovelace/entity.markdown
index 132347a1f32..7c1009f09eb 100644
--- a/source/_lovelace/entity.markdown
+++ b/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"
diff --git a/source/_lovelace/gauge.markdown b/source/_lovelace/gauge.markdown
index c82dc46e4b5..b55fe8c7093 100644
--- a/source/_lovelace/gauge.markdown
+++ b/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.
+
+
+Screenshot of the Gauge card in needle mode.
+
+
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.
diff --git a/source/_lovelace/glance.markdown b/source/_lovelace/glance.markdown
index 812c9269ca7..b9a00165006 100644
--- a/source/_lovelace/glance.markdown
+++ b/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."
diff --git a/source/_lovelace/grid.markdown b/source/_lovelace/grid.markdown
index 3b31e81f53a..95a1fc4953b 100644
--- a/source/_lovelace/grid.markdown
+++ b/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."
diff --git a/source/_lovelace/history-graph.markdown b/source/_lovelace/history-graph.markdown
index 9452a3e0969..d77a4dd437f 100644
--- a/source/_lovelace/history-graph.markdown
+++ b/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."
diff --git a/source/_lovelace/horizontal-stack.markdown b/source/_lovelace/horizontal-stack.markdown
index eaf96be80f0..fa66b6d0b80 100644
--- a/source/_lovelace/horizontal-stack.markdown
+++ b/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."
diff --git a/source/_lovelace/humidifier.markdown b/source/_lovelace/humidifier.markdown
index 935e42c2dad..25edb613984 100644
--- a/source/_lovelace/humidifier.markdown
+++ b/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."
diff --git a/source/_lovelace/iframe.markdown b/source/_lovelace/iframe.markdown
index 9b2316e41c6..310029219b2 100644
--- a/source/_lovelace/iframe.markdown
+++ b/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."
diff --git a/source/_lovelace/light.markdown b/source/_lovelace/light.markdown
index 56e74ee880a..baf00451017 100644
--- a/source/_lovelace/light.markdown
+++ b/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."
diff --git a/source/_lovelace/logbook.markdown b/source/_lovelace/logbook.markdown
index aed2f9af910..4ddb422ef86 100644
--- a/source/_lovelace/logbook.markdown
+++ b/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."
diff --git a/source/_lovelace/map.markdown b/source/_lovelace/map.markdown
index 63815a9885c..65259d0d5da 100644
--- a/source/_lovelace/map.markdown
+++ b/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"
diff --git a/source/_lovelace/markdown.markdown b/source/_lovelace/markdown.markdown
index 417f9b4e3d9..f26e7d9bbd1 100644
--- a/source/_lovelace/markdown.markdown
+++ b/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"
diff --git a/source/_lovelace/masonary.markdown b/source/_lovelace/masonary.markdown
new file mode 100644
index 00000000000..44c08960819
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/source/_lovelace/media-control.markdown b/source/_lovelace/media-control.markdown
index fc6ad9bd9e8..ab292870643 100644
--- a/source/_lovelace/media-control.markdown
+++ b/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."
diff --git a/source/_lovelace/panel.markdown b/source/_lovelace/panel.markdown
new file mode 100644
index 00000000000..98972e1a44f
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/source/_lovelace/picture-elements.markdown b/source/_lovelace/picture-elements.markdown
index 0141895c8c7..59e2732b632 100644
--- a/source/_lovelace/picture-elements.markdown
+++ b/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."
diff --git a/source/_lovelace/picture-entity.markdown b/source/_lovelace/picture-entity.markdown
index 372f85f09f7..b0e84aca0bd 100644
--- a/source/_lovelace/picture-entity.markdown
+++ b/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.
diff --git a/source/_lovelace/picture-glance.markdown b/source/_lovelace/picture-glance.markdown
index 776853bf4e5..89972b57d70 100644
--- a/source/_lovelace/picture-glance.markdown
+++ b/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."
diff --git a/source/_lovelace/picture.markdown b/source/_lovelace/picture.markdown
index 5dffca2b3e3..79cc23d89c5 100644
--- a/source/_lovelace/picture.markdown
+++ b/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."
diff --git a/source/_lovelace/plant-status.markdown b/source/_lovelace/plant-status.markdown
index 24dc0b1cecb..753a58877b2 100644
--- a/source/_lovelace/plant-status.markdown
+++ b/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."
diff --git a/source/_lovelace/sensor.markdown b/source/_lovelace/sensor.markdown
index bb268216df0..1d0b1f11d4e 100644
--- a/source/_lovelace/sensor.markdown
+++ b/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."
diff --git a/source/_lovelace/shopping-list.markdown b/source/_lovelace/shopping-list.markdown
index 360a4172448..9edd2e39aec 100644
--- a/source/_lovelace/shopping-list.markdown
+++ b/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."
diff --git a/source/_lovelace/sidebar.markdown b/source/_lovelace/sidebar.markdown
new file mode 100644
index 00000000000..03e2176fcc4
--- /dev/null
+++ b/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 %}
diff --git a/source/_lovelace/statistics-graph.markdown b/source/_lovelace/statistics-graph.markdown
new file mode 100644
index 00000000000..0afd047ab8f
--- /dev/null
+++ b/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.
+
+
+
+Screenshot of the Statistics Graph card with none metered entities and `chart_type` `line`.
+
+
+
+
+Screenshot of the Statistics Graph card with a metered entity and `chart_type` `bar`.
+
+
+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
+```
diff --git a/source/_lovelace/thermostat.markdown b/source/_lovelace/thermostat.markdown
index 4add4187272..5be392a7e67 100644
--- a/source/_lovelace/thermostat.markdown
+++ b/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."
diff --git a/source/_lovelace/vertical-stack.markdown b/source/_lovelace/vertical-stack.markdown
index fb3d0b05b43..2b5946bd9c5 100644
--- a/source/_lovelace/vertical-stack.markdown
+++ b/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."
diff --git a/source/_lovelace/weather-forecast.markdown b/source/_lovelace/weather-forecast.markdown
index 3925f8f4712..94cae354bdd 100644
--- a/source/_lovelace/weather-forecast.markdown
+++ b/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."
diff --git a/source/images/lovelace/energy/carbon-consumed-gauge.png b/source/images/lovelace/energy/carbon-consumed-gauge.png
new file mode 100644
index 00000000000..6a422bc8b92
Binary files /dev/null and b/source/images/lovelace/energy/carbon-consumed-gauge.png differ
diff --git a/source/images/lovelace/energy/devices-graph.png b/source/images/lovelace/energy/devices-graph.png
new file mode 100644
index 00000000000..e28495ddbc6
Binary files /dev/null and b/source/images/lovelace/energy/devices-graph.png differ
diff --git a/source/images/lovelace/energy/distribution.png b/source/images/lovelace/energy/distribution.png
new file mode 100644
index 00000000000..d89afabe75b
Binary files /dev/null and b/source/images/lovelace/energy/distribution.png differ
diff --git a/source/images/lovelace/energy/grid-neutrality-gauge.png b/source/images/lovelace/energy/grid-neutrality-gauge.png
new file mode 100644
index 00000000000..88153c29c05
Binary files /dev/null and b/source/images/lovelace/energy/grid-neutrality-gauge.png differ
diff --git a/source/images/lovelace/energy/solar-consumed-gauge.png b/source/images/lovelace/energy/solar-consumed-gauge.png
new file mode 100644
index 00000000000..ce0479272b6
Binary files /dev/null and b/source/images/lovelace/energy/solar-consumed-gauge.png differ
diff --git a/source/images/lovelace/energy/solar-graph.png b/source/images/lovelace/energy/solar-graph.png
new file mode 100644
index 00000000000..1e71c1da446
Binary files /dev/null and b/source/images/lovelace/energy/solar-graph.png differ
diff --git a/source/images/lovelace/energy/sources-table.png b/source/images/lovelace/energy/sources-table.png
new file mode 100644
index 00000000000..5b7316d1fdc
Binary files /dev/null and b/source/images/lovelace/energy/sources-table.png differ
diff --git a/source/images/lovelace/energy/usage-graph.png b/source/images/lovelace/energy/usage-graph.png
new file mode 100644
index 00000000000..0b7c244c0ed
Binary files /dev/null and b/source/images/lovelace/energy/usage-graph.png differ
diff --git a/source/images/lovelace/lovelace_gauge_needle_card.png b/source/images/lovelace/lovelace_gauge_needle_card.png
new file mode 100644
index 00000000000..4011c0ea7f8
Binary files /dev/null and b/source/images/lovelace/lovelace_gauge_needle_card.png differ
diff --git a/source/images/lovelace/lovelace_statistics_graph_bar.png b/source/images/lovelace/lovelace_statistics_graph_bar.png
new file mode 100644
index 00000000000..bd5db706253
Binary files /dev/null and b/source/images/lovelace/lovelace_statistics_graph_bar.png differ
diff --git a/source/images/lovelace/lovelace_statistics_graph_line.png b/source/images/lovelace/lovelace_statistics_graph_line.png
new file mode 100644
index 00000000000..b3a90185405
Binary files /dev/null and b/source/images/lovelace/lovelace_statistics_graph_line.png differ
diff --git a/source/lovelace/badges.markdown b/source/lovelace/badges.markdown
index 4f9512c2fca..18f40ebb0c2 100644
--- a/source/lovelace/badges.markdown
+++ b/source/lovelace/badges.markdown
@@ -1,5 +1,5 @@
---
-title: "Lovelace Badges"
+title: "Badges"
description: "Description of the various badges that are available."
---
diff --git a/source/lovelace/cards.markdown b/source/lovelace/cards.markdown
new file mode 100644
index 00000000000..59c4b9c79b2
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/source/lovelace/dashboards-and-views.markdown b/source/lovelace/dashboards.markdown
similarity index 58%
rename from source/lovelace/dashboards-and-views.markdown
rename to source/lovelace/dashboards.markdown
index 4f5ea17cdf9..b1448a8db71 100644
--- a/source/lovelace/dashboards-and-views.markdown
+++ b/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.
@@ -191,186 +191,4 @@ views:
title: Lovelace
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.
-
-
- 
- 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 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
-```
+```
\ No newline at end of file
diff --git a/source/lovelace/views.markdown b/source/lovelace/views.markdown
new file mode 100644
index 00000000000..c8fa471b74b
--- /dev/null
+++ b/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.
+
+
+
+ Use titles and icons to describe the content of views.
+
+
+## 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
+```
\ No newline at end of file