Cool! Thanks so much for the help.
Another question, if I may: it seems that the bar-card cannot display the label, or any other attributes of the entity. What would be the best way to go to display for example the label below the name? I am experimenting with vertical stack, but I do not want a spacing (card borders) between the name and the label.
Forever in your debt 
Please give a picture made in MS Paint or whatever of your desired design))
1st bar - what is on the top, what is on the bottom? What is added?
Sorry, you’re right.
The bar card is the tpms sensor, name is on bottom, value (state) is on top, the card has min-max value set to 200-300 kPa.
I’d like to add the temperature and potentially a last_changed value at the bottom for each sensor. The temperature is an attribute of the corresponding tpms sensor.
Additional info may be added by using card-mod.
See examples here.
These are examples for horizontal bars, a similar method may be used for vertical bars to add smth below bottom labels on your picture.
I’ve tried reproducing something similar, but my second line of text is not showing. Here is my code:
card:
type: custom:bar-card
entity: sensor.tpms_f1a81549
name: f1a81549
direction: right
entity_row: true
height: 40px
width: 100%
min: '200'
max: '300'
positions:
icon: 'off'
card_mod:
style:
mod-card:
$:
bar-card:
$: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{{ '\A' + relative_time(sensor.tpms_f1a81549.last_changed) + ' ago' }}";
white-space: pre;
font-size: 0.8rem;
}
This is what I’m getting: 
Can you check what I am doing wrong, or missing?
states.sensor.tpms_f1a81549.last_changed
…may be there are some other errors
There has to be. No matter what I write in content (even if it’s a fixed string), it won’t show.
Because you copy/pasted this from a decluttering template.
Remove these selectors.
Seriously - you should NOT “just use” ready card-mod styling w/o understanding.
I’m trying to understand this styling, but I’m struggling, it’s all new to me. I have yet to find a good page explaining styling. I found keywords in CSS pages, but I couldn’t yet get a grasp on the selectors. Any ideas on where to start?
What exactly do I need to remove from the code above? I guess I need card-mod: and style:, but still not getting results.
- Check this thread.
- Learn this repo on Github.
- Find a link at the bottom of the 1st post of the mentioned thread, it will lead you to some examples. But do not use them without thinking.
Try that:
type: custom:bar-card
entities:
- entity: ......
...
...
card_mod:
style: |
bar-card-name {
line-height: 1.1rem;
}
bar-card-name::after {
content: "{{ '\A ' + relative_time(states.sensor.tpms_f1a81549.last_changed) + ' ago' }}";
white-space: pre;
font-size: 0.8rem;
}
Check again that post, made some corrections.
Thank you so much for your help! It works now. Now, I’ll try to figure out how to do it on a vertical bar.
I’ve read the card-mod pages, but I’m having problems with nested cards. I’ll do some more experimenting, but your help was very valuable. I’m learning from examples.
I am currently using the bar card to display the state of several batteries and I use the severity to color it accordingly. However once the battery reaches 0% the bar obviously disappears. Is there a way to color the background red at that state? Currently it’s not very visually apparent when a battery is completely flat:
Hi,
I am using the bar card for displaying some entities.
Now I have a question: how can I replace the default icons of the entities with my own entity-pictures? I have already assigned my own entity-pictures to the entities in customize.yaml. Displaying these pictures in other cards works also e.g. in the entities card. But unfortunately I didn’t find how to display these entity pictures also in the Bar-Card? 
I hope you understand what I mean?
Does anyone have a tip for me here please? That would be great!
Thank you!
Ralf
And the second picture … new users are only allowed to put one picture in one post. 
Since bar-card does not support displaying entity_picture for an item, you should:
- Create an FR for the
bar-cardfor this functionality. - Meanwhile - use card-mod to display a picture:
type: vertical-stack
title: entity_picture
cards:
- type: custom:bar-card
columns: 1
entities:
- entity: sensor.processor_use
min: '0'
max: '100'
- type: custom:bar-card
columns: 1
entities:
- entity: sensor.processor_use
min: '0'
max: '100'
icon: mdi:blank
positions:
indicator: 'off'
style: |
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/images/persons/ildar.png");
background-size: 100% 100%;
}
You may also add border-radius: 10%; to get rounded corners.
2 Likes
Great, thanks for the quick help! That’s how it works!
2 Likes
hi! I’m just starting to play with the card, it looks awesome.
I’m wondering, is there an option to keep the indicator arrow always displayed/always “on”? I’d like to always see the last trend on some temperature bars.
Thanks!