Cards: add categories and expand on introduction (#31947)

Co-authored-by: Franck Nijhof <git@frenck.dev>
This commit is contained in:
c0ffeeca7 2024-03-20 15:19:51 +01:00 committed by GitHub
parent 5827d7dada
commit 11be726def
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,6 @@
---
title: "Cards"
description: "Cards."
description: "Introduction to the role of cards on the dashboard and how to add a card."
---
Each dashboard is made up of cards.
@ -10,7 +10,32 @@ Each dashboard is made up of cards.
Screenshot of the masonry view with different types of cards.
</p>
There are several built-in card types, each with their own configuration options.
## Card categories
There are several different card types, each with their own configuration options. They can be categorized in terms of their function:
- **Specific to a device type or service**: alarm, light, humidifier, thermostat, plant status, media control, weather forecast, shopping list, map, logbook, and calendar card
- **Grouping other cards**: vertical stack, horizontal stack, and grid card
- **Logic function**: conditional and entity filter card
- **Display generic data**: sensor, history graph, statistic, statistics graph, energy, gauge, and webpage card
- **Control devices and entities**: button and entity card
- **Display data and control entities**: area, picture elements, and picture glance card
## Card actions, features, header and footer widgets
Some cards have support for [tap actions](/dashboards/actions/). These actions define what will happen when you tap or hold on an object within a card.
Some cards have support for [features](/dashboards/actions/). These widgets add quick controls to the card. Supported features depend on the card and entity capabilities. Multiple features can be added to a single card.
<p class='img'><img src='/images/dashboards/features/screenshot-tile-feature-grid.png' alt="Screenshot of tile cards with features.">
Screenshot of tile cards with features.
</p>
Some cards have support for [header and footer widgets](/dashboards/header-footer/). These widgets fill up the entire available space in a card.
<p class='img'><img src='/images/dashboards/header-footer/screenshot-picture-buttons.png' alt="Screenshot of an entities card with a picture header.">
Screenshot of an entities card with a picture header and buttons footer.
</p>
## Adding cards to your dashboard
@ -18,7 +43,7 @@ There are several built-in card types, each with their own configuration options
2. Choose one of the two methods to add cards to a dashboard:
{% details "Using the Add Card button" %}
{% details "Using the Add card button" %}
1. In the bottom right, select **Add card**.
@ -53,7 +78,13 @@ Another way to add entities to a dashboard is to use the **Device** page.
## Related topics
- For a list of available card types and more detailed documentation, refer to the **Card types** section in the side navigation.
- [Views](/dashboards/views/)
- [Introduction to dashboards](/dashboards/)
- [Take control of the default dashboard](/dashboards/#get-started-with-your-own-dashboard)
- [Take control of the default dashboard](/dashboards/#get-started-with-your-own-dashboard)
### Cards
- For a list of available card types and more detailed documentation, refer to the **Card types** section in the side navigation.
- [Card tap actions](/dashboards/actions/)
- [Card features](/dashboards/actions/)
- [Card header and footer widgets](/dashboards/header-footer/)