# \[CARTE\] Header Cards ( ajouter des badges et des cartes à l'en-tête )

**URL:** <https://forum.hacf.fr/t/carte-header-cards-ajouter-des-badges-et-des-cartes-a-len-tete/9937>\
**Category:** Interface / Lovelace / Thème / Custom Card\
**Tags:** interface-lovelace\
**Created:** [Mars 5, 2022, 5:18 UTC](https://forum.hacf.fr/t/carte-header-cards-ajouter-des-badges-et-des-cartes-a-len-tete/9937 "2022-03-05T17:18:53Z")\
**Posts on this page:** 1\
**Showing post:** 22

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Mars 11, 2022, 7:46 UTC](https://forum.hacf.fr/t/carte-header-cards-ajouter-des-badges-et-des-cartes-a-len-tete/9937/22 "2022-03-11T07:46:58Z")

</div>

![moon3](https://forum.hacf.fr/uploads/default/original/2X/2/2e85ccd20c20c5c7d0993c3573bdcb13b32f1536.jpeg)

J'ai réussi a ajouter la lune en image dans la barre, suite a mon tuto [Phase de la lune en image](https://forum.hacf.fr/t/carte-les-phases-de-la-lune-en-image/9768/5).

voici mon code:

```auto
header_cards:
  cards:
    - type: glance
      columns: 6
      entities:
        - entity: alarm_control_panel.54ef44273cc1_alarm
        - entity: group.grp_portes
          style: |
            :host {
              --mdc-icon-size: 33px;
            }
        - entity: group.grp_fenetres
        - entity: group.grp_lumieres
          icon: bha:ceiling-lamp
        - entity: sun.sun
        - entity: sensor.moon_phases
          style: |
            state-badge {
              height: 27px;
              width: 27px;
            }
      show_name: false
      show_icon: true
      show_state: false
      style: |
        ha-card {
          background: none;
          box-shadow: none;
        }
        :host {
          --mdc-icon-size: 28px;
        }

```

---

_[View the full topic](https://forum.hacf.fr/t/carte-header-cards-ajouter-des-badges-et-des-cartes-a-len-tete/9937)._