Update Card
Sections are split:
Main Icon Styling
You can style the main icon like this:
Change the icon type/mdi.
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
Change the icon color.
card_mod:
style: |
ha-state-icon {
color: red;
}
Change icon size.
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 40px;
}
Rotate Icon.
card_mod:
style: |
ha-state-icon {
rotate: 30deg;
}
Offset/Pad Icon.
This one there is a couple different ones you can use, and also some different value types. i would just play around with it until you find what you like.
card_mod:
style: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
padding-bottom: -20px;
height: 20px;
width: 50px;
}
Animate the Icon.
If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.
card_mod:
style: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
End Icon Styling Section
Main Icon Background/Shape Styling
You can style the main icon background/shape like this:
Shape Color.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
}
Shape Size.
You should set the icon size to 21px as this is the standard size for mushroom cards. you are then free to change the size of the shape without affecting the icon.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 21px;
--icon-size: 100px;
}
Shape Shadow.
Left with shadow, right standard without shadow. !important seems to be required.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
}
Shape “Shape”?
Note that it doesnt seem like you can use negative values here.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
padding-right: 40px;
padding-left: 10px;
padding-bottom: 10px;
border-radius: 10px !important;
}
Shape Outline/Border.
the different border types can be found here.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px outset green
}
Shape Animation.
If you are using an animation you need to put your keyframes outside of the .shape, like the below.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
End Shape/Icon Background Styling Section
Card Styling
The card body itself can be styled like this:
Background Color.
Note that any buttons also seem to change color according to this color. you can style the buttons seperately which you will see later in the guide.
card_mod:
style: |
ha-card {
background-color: #002f7a;
}
Background outline/border.
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.
card_mod:
style: |
ha-card {
border: 2.5px outset blue;
}
Card shadow.
You can use this to both add a shadow and remove one if your theme has a shadow by default like mine does (minimalist).
Add Shadow.
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
}
Remove Shadow.
card_mod:
style: |
ha-card {
box-shadow: none;
}
Card size.
This changes the outside size of the card. not any of the interior contents. you have to use !important it seems for height to actually change.
card_mod:
style: |
ha-card {
height: 200px !important;
width: 200px;
}
Card padding.
This adds interior padding to the card and therefore squishes the internals into the dimensions of the card more. the interior items will get smaller. you have to use !important it seems for padding to take effect.
card_mod:
style: |
ha-card {
padding-right: 150px !important;
padding-left: 150px !important;
padding-bottom: 30px !important;
padding-top: 30px !important;
}
Card margins.
Card margin adds blank space to the outside of the card squeezing the entire card (interiror and exterior) into a smaller space, making the whole card smaller.
card_mod:
style: |
ha-card {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
}
Card Border/Corner Radius.
Changes the radius of the corners. this is set to 0. so sharp corners.
card_mod:
style: |
ha-card {
border-radius: 0px;
}
Card Shape Animation
remember to put your keyframes outside of the ha-card.
card_mod:
style: |
ha-card {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
End of Card Styling Section
Text Styling
Primary (or first line) text can be styled like this:
Change Font.
maybe dont use Wingdings 
card_mod:
style: |
ha-card {
font-family: "Wingdings 2";
}
Change Font Style.
Font styles can be found here.
card_mod:
style: |
ha-card {
font-style: italic;
}
Change Font Variant.
Font variants can be found here.
card_mod:
style: |
ha-card {
font-variant: small-caps;
}
Change Font Size.
I have not found a way to change font size for text accross the board. you have to do them individually it seems.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
}
Change Font Color.
I have not found a way to change color for text accross the board. you have to do them individually it seems.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
Change Alligment
Different allignment options can be found here.
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
}
Change Rows.
You can find the different types of flex direction here. yaml courtesy of @zanixmechanix
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
End of Text Styling Section
Selection Value Styling
N/A Update Card does not a selection value.
End of Selection Value Styling Section
Badge Icon Styling
N/A Update Card does not have badge icons.
End of Badge Icon Styling Section
Badge Icon Background/Shape Styling
N/A Update Card does not have badge icons.
End of Badge Icon Shape Styling Section
Slider Styling
N/A Update Card does not have a slider.
End of Slider Styling Section
Buttons Styling
If you have control buttons they can be styled like this:
Change the icon type/mdi.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--card-mod-icon: mdi:mushroom;
}
Change the icon color.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--card-mod-icon-color: orange;
}
Change icon size.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--control-icon-size: 30px;
}
Rotate Icon.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
rotate: 40deg;
}
Offset/Pad Icon.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
padding-right: 30px;
padding-left: 10px;
padding-bottom: -20px;
height: 40px;
width: 50px;
}
Animate the Icon.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. you will need to put your keyframes outside of the ha-icon as per the below.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
Button Background.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
background: #780000 !important;
}
Button Size.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. !important is required.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
height: 50px !important;
width: 50px !important;
}
Button Rotation.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
rotate: 30deg;
}
Button Location.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. Only margin top and left work, but negative values are allowed so you can move them anywhere you please.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
margin-top: 10px !important;
margin-left: 35px !important;
}
Button Border/Outline.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. border types can be found here.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
border: dashed blue !important;
}
Button Reverse Order.
yaml courtesy of @rhysb. keep in mind if you do any styling now that the nth-child(1) is now at the end instead as the order was reversed.
card_mod:
style: |
mushroom-update-buttons-control {
transform: scalex(-1);
}
Animate buttons shape.
i have added a bit of padding so the animation fits. you will need to put your keyframes outside of the .button, like the below.
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
mushroom-update-buttons-control {
height: 40px !important;
padding: 10px;
}
End of Button Styling Section
End of Update Card Section
Vacuum Card
Sections are split:
Main Icon Styling
You can style the main icon like this:
Change the icon type/mdi.
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
Change the icon color.
card_mod:
style: |
ha-state-icon {
color: red;
}
Change icon size.
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 40px;
}
Rotate Icon.
card_mod:
style: |
ha-state-icon {
rotate: 30deg;
}
Offset/Pad Icon.
This one there is a couple different ones you can use, and also some different value types. i would just play around with it until you find what you like.
card_mod:
style: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
padding-bottom: -20px;
height: 20px;
width: 50px;
}
Animate the Icon.
You can set that the icon is animated when running from the visual editor already but you are restricted to that specific animation and only condition is on vs off. If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.
card_mod:
style: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
End Icon Styling Section
Main Icon Background/Shape Styling
You can style the main icon background/shape like this:
Shape Color.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
}
Shape Size.
You should set the icon size to 21px as this is the standard size for mushroom cards. you are then free to change the size of the shape without affecting the icon.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 21px;
--icon-size: 100px;
}
Shape Shadow.
Left with shadow, right standard without shadow. !important seems to be required.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
}
Shape “Shape”?
Note that it doesnt seem like you can use negative values here.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
padding-right: 40px;
padding-left: 10px;
padding-bottom: 10px;
border-radius: 10px !important;
}
Shape Outline/Border.
the different border types can be found here.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px outset green
}
Shape Animation.
If you are using an animation you need to put your keyframes outside of the .shape, like the below.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
End Shape/Icon Background Styling Section
Card Styling
The card body itself can be styled like this:
Background Color.
Note that any buttons also seem to change color according to this color. you can style the buttons seperately which you will see later in the guide.
card_mod:
style: |
ha-card {
background-color: #002f7a;
}
Background outline/border.
Note that setting a border size does seem to change the actual card size slightly. border types can be found here.
card_mod:
style: |
ha-card {
border: 2.5px outset blue
}
Card shadow.
You can use this to both add a shadow and remove one if your theme has a shadow by default like mine does (minimalist).
Add Shadow.
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
}
Remove Shadow.
card_mod:
style: |
ha-card {
box-shadow: none;
}
Card size.
This changes the outside size of the card. not any of the interior contents. you have to use !important it seems for height to actually change.
card_mod:
style: |
ha-card {
height: 200px !important;
width: 200px;
}
Card padding.
This adds interior padding to the card and therefore squishes the internals into the dimensions of the card more. the interior items will get smaller. you have to use !important it seems for padding to take effect.
card_mod:
style: |
ha-card {
padding-right: 150px !important;
padding-left: 150px !important;
padding-bottom: 30px !important;
padding-top: 30px !important;
}
Card margins.
Card margin adds blank space to the outside of the card squeezing the entire card (interiror and exterior) into a smaller space, making the whole card smaller.
card_mod:
style: |
ha-card {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
}
Card Border/Corner Radius.
Changes the radius of the corners. this is set to 0. so sharp corners.
card_mod:
style: |
ha-card {
border-radius: 0px;
}
Card Shape Animation
remember to put your keyframes outside of the ha-card.
card_mod:
style: |
ha-card {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
End of Card Styling Section
Text Styling
Primary (or first line) text can be styled like this:
Change Font.
maybe dont use Wingdings
card_mod:
style: |
ha-card {
font-family: "Wingdings 2";
}
Change Font Style.
Font styles can be found here.
card_mod:
style: |
ha-card {
font-style: italic;
}
Change Font Variant.
Font variants can be found here.
card_mod:
style: |
ha-card {
font-variant: small-caps;
}
Change Font Size.
I have not found a way to change font size for text accross the board. you have to do them individually it seems.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
}
Change Font Color.
I have not found a way to change color for text accross the board. you have to do them individually it seems.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: blue;
--card-secondary-color: orange;
}
Change Alligment
Different allignment options can be found here.
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
}
Change Rows.
You can find the different types of flex direction here. yaml courtesy of @zanixmechanix
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
End of Text Styling Section
Selection Value Styling
N/A Vacuum Card does not a selection value.
End of Selection Value Styling Section
Badge Icon Styling
N/A Vacuum Card does not have badge icons.
End of Badge Icon Styling Section
Badge Icon Background/Shape Styling
N/A Vacuum Card does not have badge icons.
End of Badge Icon Shape Styling Section
Slider Styling
N/A Vacuum Card does not have a slider.
End of Slider Styling Section
Buttons Styling
If you have control buttons they can be styled like this:
Change the icon type/mdi.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--card-mod-icon: mdi:mushroom;
}
Change the icon color.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--card-mod-icon-color: orange;
}
Change icon size.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--control-icon-size: 30px;
}
Rotate Icon.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
rotate: 40deg;
}
Offset/Pad Icon.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
padding-right: 30px;
padding-left: 10px;
padding-bottom: -20px;
height: 40px;
width: 50px;
}
Animate the Icon.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. you will need to put your keyframes outside of the ha-icon as per the below.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
Button Background.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button {
--bg-color: #780000;
}
Button Size.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. !important is required.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button {
height: 50px !important;
width: 50px !important;
}
Button Rotation.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button {
rotate: 30deg;
}
Button Location.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. Only margin top and left work, but negative values are allowed so you can move them anywhere you please.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button {
margin-top: 10px !important;
margin-left: 35px !important;
}
Button Border/Outline.
increment the nth-child(1) by +1 for every button that you have in your card. and then style them individually as you see fit. border types can be found here.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button {
border: dashed blue !important;
}
Button Reverse Order.
yaml courtesy of @rhysb. keep in mind if you do any styling now that the nth-child(1) is now at the end instead as the order was reversed.
card_mod:
style: |
mushroom-vacuum-commands-control {
transform: scalex(-1);
}
Animate buttons shape.
i have added a bit of padding so the animation fits. you will need to put your keyframes outside of the .button, like the below.
card_mod:
style:
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
mushroom-vacuum-commands-control {
padding: 10px;
}
End of Button Styling Section
End of Vacuum Card Section