Chips Card
Sections are split:
Main Icon Styling
You can style the main icon of each chip type like this:
Change the icon type/mdi.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
mushroom-menu-chip:nth-child(9)$: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
}
Change the icon color.
Some use --color and some use --icon-color. and some use both 1 for on state and 1 for off state (the light chip only.). use the appropriate one as per the below.
!important is needed for the alarm panel chip.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
--color: red;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
--color: red;
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
--color: red;
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
--color: red;
--icon-color: blue;
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
--color: red;
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
--color: red !important;
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
--icon-color: blue;
}
mushroom-menu-chip:nth-child(9)$: |
ha-state-icon {
--icon-color: blue;
}
You can also change the icon color for some of all of the chips in a card at once with the below instead. (not recommended, as it doesnt affect all icons).
card_mod:
style: |
ha-card {
--color: blue;
}
Change icon size.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
mushroom-menu-chip:nth-child(9)$: |
ha-state-icon {
--chip-icon-size: 30px;
}
Rotate Icon.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
rotate: 30deg;
}
mushroom-menu-chip:nth-child(9)$: |
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.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
mushroom-menu-chip:nth-child(9)$: |
ha-state-icon {
padding-right: 30px;
padding-left: 10px;
height: 40px;
width: 20px;
}
Animate the Icon.
If you are using an animation you need to put your keyframes outside of the ha-state-icon, like the below.
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-entity-chip:nth-child(2)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-action-chip:nth-child(3)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-light-chip:nth-child(4)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-weather-chip:nth-child(5)$: |
ha-state-icon {
# Cant be changed as it is not a normal HA icon.
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-alarm-control-panel-chip:nth-child(7)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-back-chip:nth-child(8)$: |
ha-state-icon {
animation: wobbling 0.7s linear infinite alternate;
}
@keyframes wobbling {
0% {transform: rotate(-80deg);}
100% {transform: rotate(40deg);}
}
mushroom-menu-chip:nth-child(9)$: |
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.
This can be done in 2 ways. either globally for all chips in the card. or 1 at a time for each chip.
Globally. right under (or at the bottom of) the chips card.
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-background: blue;
}
for each chip. under the individual chip type (or at the bottom of that chip type). if you have a conditional chip make sure your code is under the chip that gets shown by the conditional chip. not under the conditional chip itself.
- type: conditional
conditions:
- entity: light.office_desk_lamp
state: 'on'
chip:
type: template
entity: light.office_desk_lamp
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: blue;
}
Shape Size.
You should set the icon size to 18px as this is the standard icon size for mushroom chips. you are then free to change the size of the shape without affecting the icon.
card_mod:
style: |
ha-card {
justify-content: center;
--chip-height: 64px;
--chip-border-radius: 50%;
--chip-icon-size: 18px;
}
Shape Shadow.
Top standard for my theme (minimalist) with shadow (just extra shadow added for effect), bottom without shadow. !important seems to be required.
Add Shadow
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.8) !important;
}
Remove Shadow.
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
Shape “Shape”?
N/A doesnt seem like you can influence the shape much other than the border radius. covered in the Shape Size section above.
Shape Outline/Border.
the different border types can be found here.
card_mod:
style: |
ha-card {
border: 2.5px outset green !important;
}
Shape Animation.
If you are using an animation you need to put your keyframes outside of the ha-card, like the below.
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 Shape/Icon Background Styling Section
Card Styling
The card body itself can be styled like this:
Background Color.
!important is required.
card_mod:
style: |
ha-card {
background-color: blue !important;
}
Background outline/border.
Note that setting a border size does seem to change the actual card size slightly. !important is required. border types can be found here.
card_mod:
style: |
ha-card {
border: 4px blue dashed !important;
}
Card shadow.
You can use this to both add a shadow and remove one of course the Chip Card itself has no shadow by default. !important is required.
Add Shadow.
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66) !important;
}
Remove Shadow.
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
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. i have added a border here to illustrate. but it isnt actually required.
card_mod:
style: |
ha-card {
height: 200px !important;
width: 200px;
border: 2px blue dashed !important;
}
Card padding.
This adds interior padding to the card for chip card it doesnt make the chips any smaller, but rather makes the card larger with a larger empty volume. border added to illustrate but not required.
card_mod:
style: |
ha-card {
padding-right: 50px !important;
padding-left: 50px!important;
padding-bottom: 50px !important;
padding-top: 50px !important;
border: 2px blue dashed !important;
}
Card margins.
Card margin adds blank space to the outside of the card. hard to show, but the screenshot is taken to show the added blank space on the outside of the card.
card_mod:
style: |
ha-card {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
border: 2px blue dashed !important;
}
Card Border/Corner Radius.
Changes the radius of the corners. border added to illustrate but not required.
card_mod:
style: |
ha-card {
border-radius: 20px !important;
border: 2px blue dashed !important;
}
Card Content Rows/Columns
You can change the way that chips are in rows and columns with the below.
Check out the below 2 links to find out what your options are. in general display changes the way that your chips themselves are displayed in the column/row. and flex-flow changes the layout of the chips.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
https://www.w3schools.com/cssref/pr_class_display.php
card_mod:
style: |
.chip-container {
flex-flow: column wrap !important;
display: inline-block !important;
}
Chip Spacing
You can change the space between chips like this.
card_mod:
style: |
.chip-container {
--chip-spacing: 20px;
}
End of Card Styling Section
Text Styling
Chip text can be styled like this:
Change Font.
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
maybe dont use Wingdings 
card_mod:
style: |
ha-card {
font-family: "Wingdings 2";
}
Change Font Style.
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
Font styles can be found here.
card_mod:
style: |
ha-card {
font-style: italic;
}
Change Font Variant.
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
Font variants can be found here.
card_mod:
style: |
ha-card {
font-variant: small-caps;
}
Change Font Size.
You can place this under the major chip card to affect all chips in the card. or you can place it under the chip that you want to style individually. doesnt matter, code is the same.
card_mod:
style: |
ha-card {
--chip-font-size: 20px;
}
Change Font Color.
You can change the color of text in 2 ways for chips. either accros the entire card for all chips like the below. (keep in mind that this also changes icon colours at the same time for most chip types, so it is really not recommended).
card_mod:
style: |
ha-card {
--primary-text-color: blue;
}
i would however recommend that you change the color on an individual level instead by placing it under the chip you are trying to style specifically. like the below:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.office_desk_lamp
state: 'on'
chip:
type: template
entity: light.office_desk_lamp
icon: mdi:lightbulb
- type: entity
entity: person.dimitri_landerloos
card_mod:
style: |
ha-card {
--text-color: blue;
}
Change Alligment
Separate allignment of text with Card-Mod does not seem to work for chips unfortunately. if someone finds out a way to adjust internal text alligment in the chips let me know, or update it here! 
Change Rows.
Only 1 row of text in the chips. so no rows can be adjusted.
End of Text Styling Section
Selection Value Styling
N/A Chips Card does not a selection value.
End of Selection Value Styling Section
Badge Icon Styling
N/A Chips Card does not have badge icons.
End of Badge Icon Styling Section
Badge Icon Background/Shape Styling
N/A Chips Card does not have badge icons.
End of Badge Icon Shape Styling Section
Slider Styling
N/A Chips Card does not have a slider.
End of Slider Styling Section
Buttons Styling
N/A Chips Card does not have control buttons.
End of Buttons Styling Section
End of Chips Card Section