Which card type would you recommend

Configuration Frontend
1

I have tried many different card types and made numerous adjustments, but I just can’t get it to look the way I want.

I would like a layout similar to the example below:

image
image1125×626 72.9 KB

  • A thin border that fits nicely inside the card
  • Two cards next to each other (in mobile view)
  • Inside the card: the value displayed prominently, with a text label underneath

I managed to remove the thousands separator and replace it with a “K” instead (for example: 1124 = 1k1).

I have tried many different card types, but either:

image
image533×753 85.5 KB

( type: custom:apexcharts-card and type: custom:gauge-card-pro )

  • a spinning gear icon appears in the top right corner
  • the arc/border cannot be made thinner at all, or

Any suggestions on which card type would work best for this layout?

2

For the first one.
If you didn’t disable to show updating you get the update spinner, that simple.
As mentioned in the docs.

3

That didn´t work, I remember

loading: false

Now I have use the flex-horseshoe-card. It’s not finished yet; there will also be an arrow indicating whether the tariff is low or high, and whether the inverter is on or off, or starting up.

Instead of kW, I want to display the voltage (like I did before on my Rpi).

image
image409×205 14.9 KB

4

Use GitHub - sxdjt/canvas-gauge-card-continued: Community-maintained continuation of canvas-gauge-card for Home Assistant · GitHub .

With this, You can set i.e border " data-border-outer-width", and alot more, beside “touch-it” with i.e card-mod

But honestly, try to look at your Gauge-Card-Pro, in Your Browser-dev-Tools “inspect”, i wouldn’t be surpriced if you could use same/similar " data-border-outer-width" either direct in Card-Config, or through Card-mod