How to create sections in lovelace

Configuration Frontend
1
  • type: section must not be right

image
image1680×900 53.6 KB

2

You gotta follow the documents. You can’t just start making up stuff and expect it to work. What do you expect this ‘sections’ card to do?

3

Well theres a shit ton of documents haha…and most only cover the basics. I will keep looking.

Looks like I need to make better use of entities and cards in my yaml, but again, docs are pretty basic.

4

Well, what do you mean by ‘section’?

5

I think I’m mistaking a section for a card…just wanted to break those light areas up into their own section…or card.

6

Well I for one am confused because I just looked at your lovelace and it does not look… ‘normal’. It looks like you’re using custom cards all over the place. But what’s odd is that they appear to be the custom row cards, not full cards.

Typically to break things up into ‘sections’, you end up using ‘views’ and ‘entities’ cards. Take a look at the demo video. Learn how to manipulate the UI with the 3 dots. It’ll start to make sense when you do that.

7

Getting better!

Screenshot_20200217-140922_Home Assistant
Screenshot_20200217-140922_Home Assistant1080×2220 182 KB

8

type: section is a special entity for use on an entities card. You use it in a list of entities to split it up within the card.

For example, in your last post above, you could use it on your Main Level card and have a thin line separating different parts of the card. Here is my Lights card on my main screen. You can see I’ve used the section to split the lights up into different rooms.

chrome_C4mm2Xn9JO
chrome_C4mm2Xn9JO503×979 23.3 KB

Here is the code for the start of this card

show_header_toggle: true
title: Lights
type: entities
entities:
  - label: Bedroom                   # This is my first section with a label
    type: section
  - entity: light.chriss_lamp
    icon: 'mdi:lamp'
    type: 'custom:slider-entity-row'
  - entity: light.lisas_lamp
    icon: 'mdi:lamp'
    type: 'custom:slider-entity-row'
  - label: Dining                    # Second section
    type: section
  - entity: light.dining
    icon: 'mdi:ceiling-light'
    type: 'custom:slider-entity-row'
6 Likes
9

Cool!

I had no idea that even existed.

I use “divider” in a few cards. Maybe I can find a use for “section:” now too.

10

There are a few different ones. See the following link for a bunch of different Special Row Elements.

1 Like
11

Thanks.

I’ve been to that page a few times before.

I guess it pays to continue to scroll down. :wink:

12

is it possible to hide the line? in between the title and the “section”?