How can I do the Title left and badges on the right, with all cards below?

[j-loewen]

Hello,

How can I do the Title left and badges on the right, with all cards below? Like on almost all your examples!

Thanks in advance!

[Madelena]

I used a layout-card to turn the page into a CSS Grid:

  - title: Lights
    type: custom:grid-layout
    layout:
      grid-template-columns: repeat(auto-fill, [col-start] minmax(360px, 1fr) [col-end])
      grid-template-rows: auto
      grid-column-gap: 32px
      margin: 0 32px
      mediaquery:
        '(max-width: 800px)':
          margin: 0
    cards:
      - type: markdown
        content: >
          # Lights

          You have {{ states.light|length }} lights and {{
          states.light|selectattr('state','equalto','on')|list|length }} of
          them {{ iif(
          (states.light|selectattr('state','equalto','on')|list|length ==
          1), 'is', 'are') }}  turned on.
        style:
          .: |
            ha-card {
              background: none;
            }
          ha-markdown$: |
            h1 {
              font-size: var(--title-font-size);
              font-weight: 500;
              line-height: 1.1;
              margin-left: -2px;
              margin-block-end: -8px;
            }
        view_layout:
          grid-column-start: 1
          grid-column-end: -1

The grid-column-start and grid-column-end attributes tell the CSS grid to span that card from the very left to the very right.

[j-loewen]

Thank you very much for your help. I have one final question:
How did you place the three cards aligned to the right of the markdown in this screenshot?

[Madelena]

That's essentially a layout-card inside the layout-card.

Instead of just having a markdown card, it's a layout card with a markdown card and a swipe card inside.

cards:
- type: custom:layout-card
  layout_type: custom:grid-layout
  cards:
    - type: markdown
      content: >
        # Lights
  
        You have {{ states.light|length }} lights and {{
        states.light|selectattr('state','equalto','on')|list|length }} of them {{
        iif( (states.light|selectattr('state','equalto','on')|list|length == 1),
        'is', 'are') }}  turned on.
      style:
        .: |
          ha-card {
            background: none;
          }
        ha-markdown$: |
          h1 {
            font-size: var(--title-font-size);
            font-weight: 500;
            line-height: 1.1;
            margin-left: -2px;
            margin-block-end: -8px;
          }
    - type: custom:layout-card
      layout_type: custom:horizontal-layout
      cards:
        - type: custom:swipe-card
          parameters:
            breakpointBase: container
            enabled: true
            slidesPerView: 2
          cards:
            - type: custom:mushroom-entity-card
              ...
            - type: custom:mushroom-entity-card
              ...
      view_layout:
        place-self: center
  layout:
    grid-template-columns: auto max-content
    grid-template-rows: auto
    mediaquery:
      '(max-width: 800px)':
        grid-template-columns: 1fr
    margin: 0
  view_layout:
    grid-column-start: 1
    grid-column-end: -1

[j-loewen]

Thanks!!!

[marvandorth]

Doing a reply on closed issue on purpose.
I was wondering if you're gonna share your whole dashboard config.
I really need a head start and love your HA dashboard you shared on Reddit!

[Madelena]

@marvandorth I wanted to share the whole dashboard config, but I realized that it was filled with private info... 😨 which is why I'm releasing this piece by piece.

[marvandorth]

@marvandorth I wanted to share the whole dashboard config, but I realized that it was filled with private info... 😨 which is why I'm releasing this piece by piece.

Totally understand! You can try using secrets.yaml and replace every personal part with !secret.
That way you can publish without privacy concerns.
I'm very fond of your work and would love to see some code to use in my own setup 😊🤗