Sections Divider

Configuration Frontend
1

Hello - I’ve recently converted my dashboard to sections. I’m using a divider card (bubble card in HACS) to separate my “sections”. Here is what it looks like:

Screenshot 2024-07-08 183906
Screenshot 2024-07-08 183906780×343 117 KB

Unfortunately the spacing is sort of weird. The various title cards look better as far as spacing goes but don’t look as nice (no icon for example or the line).

I’m wondering if anyone is aware of a card in HACS that can accomplish my look with more flexibility? Or if it is possible to “style” one of the built in card to look similar my example?

2

Expander Card

3

That looks like a cool card, but it’s not what I’m looking for. I just want a simple customizable divider card of some sort.

4

In the config for the divider card, try Styling Options – Carl Layout – Large. It should make the spacing less weird.

You could also add an empty column bubble card to the section above it for even more spacing.

You can also style the bubble card, even without card-mod: GitHub - Clooos/Bubble-Card: Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.

5

For what it’s worth, I found the culprit… I just don’t have the solution.

When I uncheck the “–row-height” css box, everything displays as desired.

image
image783×303 15.4 KB

Seems others are having issues with other cards and too much white space below and they have identifies the same property. Unfortunately my knowledge here is fairly limited so I’m completely lost on finding a solution.

6

I have used the Mushroom Title Card as a divider. It fills the gap and you can set it to just be text.

1 Like