Is there a catalog of native visual cards I can browser?

[thomnet]

I’m using AI to help with the UI config, and so far it’s been great, and has helped my fast-track my learning experience with HA.

The issue I’m having now appears to be a limitation of how cards can be resized. I am very pleased with the 1st 2 rows. What I would like to have below that Overview area are 2 more rows, 4 elements across like the 1st row in the Overview.

The 3rd row would be a numeric value for each of the 4 RVs, and the 4th would be a visual gauge of some sort directly under each numeric card above it. The style of the visualization cards is less important than getting them to fit 4 across and aligned with the numeric cards above them.

AI has gone down many paths to achieve this with no luck so far. The latest try was to install hacs and use the bar-card horizontally, but can’t reduce it’s width to fit, despite several variations to do so such as the “card_mod”:

          - type: custom:bar-card
            entity: sensor.rv1_utilization
            min: 0
            max: 100
            height: 30px
            positions:
              name: 'off'
              value: 'off'
            card_mod:
              style: |
                ha-card {
                  min-width: 10px !important;
                }

The numeric cards were given a “column_span: 3” to break out of the 3 columns of the section (I don’t know why it was 3 rather than 4 for the dashboard section, but it worked ok for Overview so I didn’t care) to span the width of the container for the 4 numeric cards. That couldn’t be done with the bar-cards, apparently due to a minimum width constraint. So I’m open to exploring other card styles to graphically visualize the numeric value. I have attached a screenshot that shows the issue.

[tom_l]

If a custom card has not been updated to work with the sections view one trick you can use is to put it in a grid card. One column, one row, with square card turned off. You can then resize this card (and its contents).

Or if you want two of the unsupported cards in a row then use the grid card with two columns (again turn off “square card”).

[thomnet]

Thanks tom_I

I resolved the issue. I was working mostly in the yaml editor with testing from time to time in the gui. The breakthrough was discovering the layout tab that can be used to resize cards. I really don’t like how the tab bar works tho, its not fixed things float around. Anyway, see the images for where I am currently. Its not perfect but I’m making progress. Actually i see the Overview gauges aren’t up to date. They all show percentages now like the detail page does.