Initial documentation for lovelace (#5677)

* Update entities.markdown

* Update history-graph.markdown

* Update entity-filter.markdown

* Update horizontal-stack.markdown

* Update markdown.markdown

* Update markdown.markdown

* Update media-control.markdown

* Add files via upload

* Update media-control.markdown

* Update entity-filter.markdown

* Update history-graph.markdown

* Update horizontal-stack.markdown

* Update markdown.markdown

* Add files via upload

* Update entities.markdown

* Only relative urls.

* New lines around code blocks.

* new lines around code block, fix link.

* Fix links.

source/_lovelace/entities.markdown

@@ -2,12 +2,43 @@
 layout: page
 title: "Entities Card"
 sidebar_label: Entities
-description: "TBD"
+description: "Entities will be the most common type of card that will also be the most familiar to people using the standard interface. It groups items together very close to how groups used to do."
 date: 2018-07-01 10:28 +00:00
 sidebar: true
 comments: false
 sharing: true
 footer: true
 ---
+### Entities
+Entities will be the most common type of card that will also be the most familiar to people using the standard interface. It groups items together very close to how groups used to do.
 
-TBD
+**Options**
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `entities`
+| entities | list | **Required** | Entity id's or an `entity` object (see structure below).
+| title | string | Optional | Card title
+| show_header_toggle | boolean | true | Button to turn on/off all entities
+
+`entity` object
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| entity | string | **Required** | An entity_id. Example: 'device_tracker.demo_paulus'.
+| name | string | **Required** | A new name for the entity_id
+
+**Example**
+
+```yaml
+- type: entities
+  title: Entities card sample
+  show_header_toggle: true
+  entities:
+    - entity: alarm_control_panel.alarm
+      name: Alarm Panel
+    - device_tracker.demo_paulus
+    - switch.decorative_lights
+    - group.all_lights
+    - group.all_locks
+```

source/_lovelace/entity-filter.markdown

@@ -2,7 +2,7 @@
 layout: page
 title: "Entity Filter Card"
 sidebar_label: Entity Filter
-description: "TBD"
+description: "This 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. "
 date: 2018-07-01 10:28 +00:00
 sidebar: true
 comments: false
@@ -10,4 +10,59 @@ sharing: true
 footer: true
 ---
 
-TBD
+### Entity filter
+
+This 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. 
+
+This type of card can also be used together with rest of cards that allow multiple entities, allowing you to use [glance](/lovelace/glance/) or [picture-glance](/lovelace/picture-glance/). By default it uses [entities](/lovelace/entities/) card model.
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_entity_filter.png' alt='Screenshot of the entity filter card'>
+Screenshot of the entity filter card.
+</p>
+
+**Options**
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `entity-filter`
+| entities | array | **Required** | Array of entity_ids
+| state_filter | array | **Required** | Array of strings representing states
+| card | object | `entities` type | Extra options to pass down to the card rendering the result.
+| show_empty | boolean | true | Allows hiding of card when no entities returned by filter.
+
+**Examples**
+
+Show only active switches or lights in the house
+```yaml
+- type: entity-filter
+  entities:
+    - entity: light.bed_light
+      name: Bed
+    - light.kitchen_lights
+    - light.ceiling_lights
+  state_filter:
+    - 'on'
+  card:
+    title: Eating power
+```
+
+Show only people that are at home using [glance](/lovelace/glance/):
+
+```yaml
+- type: entity-filter
+  entities:
+    - device_tracker.demo_paulus
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+  state_filter:
+    - 'home'
+  card: 
+    type: glance
+    title: People at home
+```
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_entity_filter_glance.png' alt='Screenshot of the entity filter used on a Glance card'>
+Screenshot of the entity filter used on a Glance card.
+</p>

source/_lovelace/history-graph.markdown

@@ -2,12 +2,38 @@
 layout: page
 title: "History Graph Card"
 sidebar_label: History Graph
-description: "TBD"
+description: "History graph is a basic card, allowing you to display a graph for each of the entities in the list specified as config."
 date: 2018-07-01 10:28 +00:00
 sidebar: true
 comments: false
 sharing: true
 footer: true
 ---
+### History graph
 
-TBD
+History graph is a basic card, allowing you to display a graph for each of the entities in the list specified as config.
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_history_graph.png' alt='Screenshot of the history graph card'>
+Screenshot of the history graph card.
+</p>
+
+**Options**
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `history-graph`
+| entities | list | **Required** | List of entities to graph.
+| hours_to_show | integer | 24 | Hours to show
+| refresh_interval | integer | 0 | Refresh interval in seconds
+| title | string | Optional | `My Graphs`
+
+**Example**
+
+```yaml
+- type: history-graph
+  title: 'My Graph'
+  entities:
+    - sensor.outside_temperature
+    - media_player.lounge_room
+```

source/_lovelace/horizontal-stack.markdown

@@ -2,12 +2,40 @@
 layout: page
 title: "Horizontal Stack Card"
 sidebar_label: Horizontal Stack
-description: "TBD"
+description: "Horizontal stack card will allow you to stack together multiple cards so they always sit next to each other in the space of one column."
 date: 2018-07-01 10:28 +00:00
 sidebar: true
 comments: false
 sharing: true
 footer: true
 ---
+### Horizontal stack
 
-TBD
+Horizontal stack card will allow you to stack together multiple cards so they always sit next to each other in the space of one column.
+
+**Options**
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `horizontal-stack`
+| cards | list | **Required** | List of cards
+
+**Example**
+
+Basic example
+
+```yaml
+- type: horizontal-stack
+  cards:
+    - type: picture-entity
+      image: https://images.pexels.com/photos/164595/pexels-photo-164595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
+      entity: light.ceiling_lights
+    - type: picture-entity
+      image: https://images.pexels.com/photos/545012/pexels-photo-545012.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
+      entity: light.bed_light
+```
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_horizontal_stack.PNG' alt='Screenshot of the 2 cards in a horizontal stack card>
+Screenshot of the 2 cards in a horizontal stack card.
+</p>

source/_lovelace/markdown.markdown

@@ -2,7 +2,7 @@
 layout: page
 title: "Markdown Card"
 sidebar_label: Markdown
-description: "TBD"
+description: "Markdown card is used to render markdown"
 date: 2018-07-01 10:28 +00:00
 sidebar: true
 comments: false
@@ -10,4 +10,28 @@ sharing: true
 footer: true
 ---
 
-TBD
+### Markdown
+Markdown card is used to render [markdown](http://commonmark.org/help/)
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_markdown.png' alt='Screenshot of the markdown card'>
+Screenshot of the markdown card.
+</p>
+
+**Options**
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `markdown`
+| content | string | **Required** | Content to render as [markdown](http://commonmark.org/help/).
+| title | string | Optional | Card title
+
+**Example**
+
+```yaml
+- type: markdown
+  content: >
+    ## Lovelace
+
+    Starting with Home Assistant 0.72, we're experimenting with a new way of defining your interface. We're calling it the **Lovelace UI**.
+``

source/_lovelace/media-control.markdown

@@ -2,7 +2,7 @@
 layout: page
 title: "Media Control Card"
 sidebar_label: Media Control
-description: "TBD"
+description: "The media controller card is used to display Media Player entities on an interface with easy to use controls. "
 date: 2018-07-01 10:28 +00:00
 sidebar: true
 comments: false
@@ -10,4 +10,25 @@ sharing: true
 footer: true
 ---
 
-TBD
+### Media controller
+
+The media controller card is used to display [Media Player](/components/#search/media-player) entities on an interface with easy to use controls. 
+
+<p class='img'>
+<img src='/images/lovelace/lovelace_mediaplayer.png' alt='Screenshot of the media player control card'>
+Screenshot of the media player control card.
+</p>
+
+**Options**
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| type | string | **Required** | `media-control`
+| entity | string | **Required** | Entity id of `media_player` domain
+
+**Example**
+
+```yaml
+- type: media-control
+  entity: media_player.lounge_room
+```