Card for only a title without any content?

Configuration
1

Hi,

I try to redesign my dashboard. One of the Views shows each rooms different status. For a better look I try to solve the design with Grid cards or Vertical stack card + Grid cards. The goal tfor each room to look like:

  • Room"s name
  • A glance card which shows some status opened window, temperature, humidity.
  • An entites card with the switchable entities (light, switch) + cast devices

My biggest issue is the first line, the room’s name. If I add just a title, it is out of the cards, so it is ugly. See my bad example below. The “Nappali” and the “Konyha” are two rooms. They have to be shown in same column for better looking, that’s why I try to use Grid or Vertical stack… My ide was to create a card on top of each rooms only with the name of the room.

badexample
badexample456×643 14.2 KB

2

I think there are a few ways to achieve what you are looking for.

Here a simple one for the beginning:

type: entities
entities: []
title: Title
show_header_toggle: false
state_color: false

Another possibility is the markdown card.

type: markdown
content: Title

Would be great to understand if that’s what you are looking for.

3

I’ve tried both of them. I’m looking for something like the empty Entities card, but the problem with this that the text is a little bit upper from the middle (see my screenshot below). In case of Markdown the text is too small.
I’m looking for a solution where I can show a little bit separated each room, but I can arrange them in a bundle (e.g. the “Konyha” room has to be shown under “Nappali” room. That’s why I use grid or Vertical stack card.

badexample2
badexample2462×648 16.6 KB

4

Have you tried the button or button-text card?

5

Thank you, but not the best unfortunately. It goes center aligned and without icon it is not so nice.
badexample3

6

Markdown is similar to HTML and can be changed! Try the following:

type: markdown
content: |-
  # H1 Title
  ## H2 Title

Just remove the title size you don’t like.

3 Likes
7

yes, try to adapt (Mod the styles) of any of the suggestions above using custom card-mod. Nothing will fit your needs out of the box, you have to change to your wishes.

without any styling this wont be what you want… put some effort in understanding the great button card before dismissing it as not the best. Did you read the docs on styling these button cards at all?

Adding to the above options, here is an example of a card-header mod:

    style: |
      .card-header {background-color: var(--primary-color);}

which will give you an idea to have the header stand out of the rest of the card. of course you can style anything, most certainly including the spacing/positioning.

use custom stack-in-card to stack and do away with the spaces between the cards

8

How about using the card header?

9

Yes, that’s what I was looking for! Thanks a lot!

10

Thanks a lot! Berichta’s Markdown soultion is what we have out of the box :slight_smile:

11

Unfortunately doesn’t work not with Vertical stack neither Grid card

12

Did you ever find a solution @FaBRiK
I have the same issue with a vertical stack. I configured a title via barebone card yaml

afbeelding

Result:

afbeelding

13

Finally I changed to Mushroom cards. They are really awesome.

1 Like
14

Any reason of not using a standard “title” for vertical-stack, stack-in-card? (+card-mod if needed)

1 Like
15

What would that look like ?

thx