It’s not that easy, because here as well as in most parts of our life, there are a lot of different ways, to achieve, what you want.
See, the thing is, it depends on so many factors, what you can/should/want to use as a card, that there simply is no right answer. If you have specific sensors build in the background, you might want or need to use another card.
That said, the above screenshot (or mockup) is relatively easy to make in lovelace. You will need a few custom cards, but nothing fancy out of the ordinary. Note, that this would be my first try for this design, so it may very well be, that others would do that different, or with a little more time, find potential to save ressources and so on… You get the idea.
For the sidebar I’d use layout-card
and a grid system. Both “text” parts in the “header” are probably made with markdown-card
. For the graph I’d choose mini-graph-card
. The light buttons are made with button-card
. Media is likely to be mini-media-player
and afterwards the standard new weather-card
.
To line the cards up, I’d use a second instance of layout-card
and do the sorting by hand (vertical-mode).
As I said, that would be my way to set this up. Others will very likely do it in another way. The bigger problem comes now, as all of these cards have a lot (and I really mean a lot!) customization options. To locate which one is right for you, will be a time consuming process. For example, the rounded corners for buttons can be done (1) in button-card itself or (2) via card-mod. With card-mod you could change all other (card-) corners as well (in one line). And here you need to know, what can do what.
But, let’s be honest, nobody knows and has all the available options at hand. If you “work” with HA, you will eventually see a lot of things, and then find yourself in the situation, that you really want to adapt your settings.
Have fun exploring all the cool things that are possible with lovelace and HA