Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add heading card #34978

Merged
merged 7 commits into from
Sep 30, 2024
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions source/_dashboards/heading.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
---
type: card
title: "Heading card"
sidebar_label: Heading
description: "The Heading card structures your dashboard by providing title, icon, navigation and badges."
related:
- docs: /dashboards/actions/
title: Card actions
- docs: /dashboards/cards/
title: Dashboard cards
---

The Heading card structures your dashboard by providing title, icon and navigation. This card supports [actions](/dashboards/actions/).

<p class='img'>
<img src='/images/dashboards/heading_card.png' alt='Screenshot of heading cards'>
Screenshot of heading cards.
</p>

```yaml
type: heading
heading: Living room
icon: mdi:sofa
badges:
- type: entity
entity_id: sensor.living_room_sensor_temperature
color: red
- type: entity
entity_id: sensor.living_room_sensor_humidity
color: deep-purple
```

{% configuration entity %}
type:
required: true
description: "`heading`"
type: string
heading:
required: false
description: Heading text
type: string
heading_style:
required: false
description: Style of the heading. Can be either `title` or `subtitle`.
type: string
default: title
icon:
required: false
description: Icon displayed before the heading text.
type: string
tap_action:
required: false
description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing. If an action is configured, a chevron will appear next to the heading text.
type: map
badges:
required: false
description: Additional small badges to display entity information. See [heading badges](/dashboards/heading/#heading-badges).
type: list
{% endconfiguration %}

## Heading badges

In addition to the heading text, each heading card can show small badges. They are smaller than regular [badges](/dashboards/badges/) and don't have a background. The heading badges can display sensor information in a compact and minimal style.

```yaml
type: entity
entity: light.living_room
```

{% configuration entity %}
type:
required: true
description: "`entity`"
type: string
entity:
required: true
description: Entity ID.
type: string
name:
required: false
description: Overwrites the entity name. The name will be only displayed if `state_content` includes `name` token.
type: string
icon:
required: false
description: Overwrites the entity icon.
type: string
color:
required: false
description: Set the color when the entity is active. By default, it will not be colored. It can be set to the `state` special token to dynamically color the icon based on `state`, `domain`, and `device_class` of your entity. It also accepts [color token](/dashboards/tile/#available-colors) or hex color code.
type: string
default: none
show_icon:
required: false
description: Show the icon
type: boolean
default: "true"
show_state:
required: false
description: Show the state.
type: boolean
default: "false"
state_content:
required: false
description: >
Content to display for the state. Can be `state`, `name`, `last_changed`, `last_updated`, or any attribute of the entity. Can be either a string with a single item, or a list of string items. Default depends on the entity domain.
type: [string, list]
tap_action:
required: false
description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing.
type: map
{% endconfiguration %}
6 changes: 4 additions & 2 deletions source/_dashboards/sections.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@ Once you have created a sections view, you can populate it with sections and car
![Add Section button](/images/dashboards/sections_view_add-card-or-section.png)

2. To add a new section, select the **Create section** button.
3. To edit the section title, select the edit {% icon "mdi:edit" %} button.
- If you leave the section title empty, this line will be hidden.
3. A [heading card](/dashboards/heading) will be automatically added to the top of the section.
- To edit it, select the card.
- If you don't want a heading title at the top of the section, delete this card.
- The title can be added again later, like any other card.
4. If you want this section to be visible only to specific users or under a certain condition, you can define those conditions:
- On the **Visibility** tab, select **Add condition**.
- Select the type of condition, and enter the parameters.
Expand Down
Binary file added source/images/dashboards/heading_card.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.