Of course you can do this by using custom:stack-in-card and mode: horizontal so you would have the chips to the right and not at the bottom.
Maybe have a placeholder in a vertical stack to have the wanted chip in the lower right corner
You could steal some code here: Mushroom Cards - Build a beautiful dashboard easily š - #996 by RodgerDodger
Can you share your roborock card ?
Here you go!
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
entity_id: vacuum.xiaomi_vacuum_cleaner
primary: Roborock S4
secondary: '{{ states(entity) }}'
icon: mdi:vacuum
entity: vacuum.xiaomi_vacuum_cleaner
icon_color: white
tap_action:
action: call-service
service: vacuum.pause
data: {}
target:
entity_id: vacuum.xiaomi_vacuum_cleaner
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:play
entity: script.1590800934038
icon_color: white
layout: vertical
tap_action:
action: call-service
service: script.turn_on
service_data: {}
target:
entity_id: script.1590800934038
secondary: Start
- type: custom:mushroom-template-card
icon: mdi:delete
icon_color: white
entity_id: script.empty_vacuum
tap_action:
action: call-service
service: script.turn_on
service_data: {}
target:
entity_id: script.empty_vacuum
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary: Empty
- type: custom:mushroom-template-card
layout: vertical
entity: vacuum.xiaomi_vacuum_cleaner
icon: mdi:home-alert
icon_color: white
tap_action:
action: call-service
service: vacuum.return_to_base
service_data: {}
target:
entity_id: vacuum.xiaomi_vacuum_cleaner
double_tap_action:
action: none
hold_action:
action: none
secondary: Dock
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px;
background: #3d5afe
}
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
card_mod: null
style: |
ha-card {
background: #3d5afe
}
Brilliant! I was able to finally get the fan to spin in the chip and still have content with this code, thank you! 
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: fan.fans
state: 'on'
chip:
type: template
entity: sensor.count_fans_on
icon: mdi:fan
icon_color: green
tap_action:
action: call-service
service: fan.turn_off
data: {}
target:
entity_id: fan.fans
content: '{{ states(entity) }}'
style:
div:
mushroom-template-chip:
$:
mushroom-chip: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Can you share your code for your dashboard? I think youāve done a really nice job and would like to build something similar. Thanks!
Sure, it starts with the scripts - pasting one example:
start_radio1:
alias: 'Start Radio1'
sequence:
- service: media_player.volume_mute
data:
entity_id: media_player.gh_mini
is_volume_muted: true
- service: spotcast.start
data:
device_name: 'Salon'
uri: 'spotify:track:5V3b2UB9tCAHuqXj2b2EP7' # track with 1 second of silence
- service: media_player.volume_mute
data:
entity_id: media_player.gh_mini
is_volume_muted: false
- service: media_player.volume_set #setting the volume is optional ofcourse
data:
entity_id: media_player.gh_mini
volume_level: 0.1
- service: media_player.play_media
target:
entity_id: media_player.gh_mini
data:
media_content_type: music
media_content_id: "http://217.74.72.11/rmf_fm"
RMF maxx url: RMF MAXXX KrakĆ³w - RMF MAXXX KrakĆ³w - sÅuchaj w RMF ON
eska:http://www.pldm.ml/radio.php?id=-1&url=http://www.eskago.pl/radio/eska-malopolska-zakopane"
zet:
https://zt.cdn.eurozet.pl/zet-tun.mp3"
then here is the whole lovelace card:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 51% 49%
grid-template-rows: auto
cards:
- type: custom:mushroom-media-player-card
entity: media_player.gh_mini
layout: horizontal
tap_action:
action: toggle
hold_action:
action: more-info
use_media_artwork: true
style: |
ha-card {
box-shadow: 0px 0px;
- type: conditional
conditions:
- entity: media_player.gh_mini
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:play
show_icon: false
name: test
tap_action:
action: call-service
service: media_player.media_play
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:pause
tap_action:
action: call-service
service: media_player.media_pause
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:stop
tap_action:
action: call-service
service: media_player.media_stop
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:skip-forward
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.volumeup
service_data:
entity_id: media_player.gh_mini
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
card_mod: null
content: >-
{{ state_attr('media_player.gh_mini', 'volume_level') |
round(2,default="0") *10 }}
style: |
ha-card {
box-shadow: 0px 0px;
}
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.volumedown
service_data:
entity_id: media_player.gh_mini
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
alignment: center
- type: horizontal-stack
cards:
- type: custom:text-divider-row
text: Spotify
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
fill_container: false
multiline_secondary: false
primary: Daily Mix 1
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
- type: custom:mushroom-template-card
fill_container: false
multiline_secondary: false
primary: Daily Mix 2
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
- type: custom:mushroom-template-card
fill_container: false
multiline_secondary: false
primary: Weekly
layout: vertical
tap_action:
action: call-service
service: script.start_radio1
- type: custom:text-divider-row
text: Radio
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/rmf_v3.png' ) no-repeat center 0px;
background-size: 60px 35px;
}
tap_action:
action: call-service
service: script.start_radio1
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/rmf_maxxx_v2.png' ) no-repeat center 0px;
background-size: 60px 40px;
}
tap_action:
action: call-service
service: script.start_radio2
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/eska_v2.png' ) no-repeat center 0px;
background-size: 50px 45px;
}
tap_action:
action: call-service
service: script.start_radio3
- type: custom:mushroom-template-card
icon: mdi
fill_container: false
multiline_secondary: false
layout: vertical
style: |
mushroom-card {
background: var(--card-background-color) url( '/local/images/radia/zet_v2.png' ) no-repeat center 0px;
background-size: 60px 40px;
}
tap_action:
action: call-service
service: script.start_radio4
posted here 
sure:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:frigate-card
cameras:
- live_provider: auto
webrtc_card:
entity: camera.voordeur_3
camera_entity: camera.voordeur_2
view:
default: live
update_force: true
menu:
buttons:
image: true
live:
preload: true
lazy_unload: true
auto_unmute: false
controls:
thumbnails:
mode: none
media: snapshots
next_previous:
style: none
transition_effect: none
event_gallery: {}
event_viewer:
controls:
next_previous:
style: thumbnails
title:
mode: none
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon_color: |2-
{% set state=states('switch.voordeur_spotlight') %}
{% if state=='on' %}
white
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: switch.voordeur_spotlight
icon: |
{% set state=states('switch.voordeur_spotlight') %}
{% if state=='on' %}
mdi:lightbulb-spot
{% else %}
mdi:lightbulb-spot-off
{% endif %}
tap_action:
action: toggle
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.voordeur_vehicle_detected') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.voordeur_vehicle_detected
icon: |
{% set state=states('binary_sensor.voordeur_vehicle_detected') %}
{% if state=='on' %}
mdi:car
{% else %}
mdi:car-off
{% endif %}
tap_action:
action: more-info
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.voordeur_person_motion') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.voordeur_person_motion
icon: |
{% set state=states('binary_sensor.voordeur_person_motion') %}
{% if state=='on' %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
tap_action:
action: more-info
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon_color: |2-
{% set state=states('light.buitenlamp') %}
{% if state=='on' %}
yellow
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: light.buitenlamp
icon: |
{% set state=states('light.buitenlamp') %}
{% if state=='on' %}
mdi:coach-lamp
{% else %}
mdi:coach-lamp
{% endif %}
tap_action:
action: toggle
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon_color: |2-
{% set state=states('switch.voordeur_ir_lights') %}
{% if state=='on' %}
red
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: switch.voordeur_ir_lights
icon: |
{% set state=states('switch.voordeur_ir_lights') %}
{% if state=='on' %}
mdi:flashlight
{% else %}
mdi:flashlight-off
{% endif %}
tap_action:
action: toggle
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: camera.voordeur_profile001_substream
icon: mdi:arrow-left-drop-circle-outline
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: onvif.ptz
data:
pan: LEFT
move_mode: ContinuousMove
target:
entity_id: camera.voordeur_profile001_substream
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: camera.voordeur_profile001_substream
icon: mdi:minus-circle-outline
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: onvif.ptz
data:
move_mode: ContinuousMove
zoom: ZOOM_OUT
distance: 1
speed: 1
continuous_duration: 1
target:
entity_id: camera.voordeur_profile001_substream
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: camera.voordeur_profile001_substream
icon: mdi:arrow-up-drop-circle-outline
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: onvif.ptz
data:
tilt: UP
move_mode: ContinuousMove
target:
entity_id: camera.voordeur_profile001_substream
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: camera.voordeur_profile001_substream
icon: mdi:arrow-down-drop-circle-outline
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: onvif.ptz
data:
tilt: DOWN
move_mode: ContinuousMove
target:
entity_id: camera.voordeur_profile001_substream
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: camera.voordeur_profile001_substream
icon: mdi:plus-circle-outline
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: onvif.ptz
data:
move_mode: ContinuousMove
zoom: ZOOM_IN
distance: 1
speed: 1
continuous_duration: 1
target:
entity_id: camera.voordeur_profile001_substream
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: camera.voordeur_profile001_substream
icon: mdi:arrow-right-drop-circle-outline
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: onvif.ptz
data:
pan: RIGHT
move_mode: ContinuousMove
target:
entity_id: camera.voordeur_profile001_substream
hold_action:
action: none
double_tap_action:
action: none
Hi All -
Trying to get my feet under me with zero Yaml and very little HA experience so no judging! 
Below is a piece of my first Mushroom-based dashboard.
Itās a vertical stack with 9 horizontal stacks (two for the āareaā titles).
I have two issues:
Thanks!
Try a placeholder card as the second card on the horizontal stack next to your Outside card with no data. Maybe a mushroom template card so you can easily delete every data.Or put Garage, Patio and Outside in one horizontal stack.
Youāll need a template in there.
{{ states('sensor.YOURTEMP') | round(1) }}
should work.
Iām using card_mod to change the font size on all of the mushroom chip cards in a vertical stack. I can apply it successfully as shown in each chip card, but Iām trying to determine if thereās a way to apply it more globally (higher up in the hierarchy kind of like the commented out syntax at the top):
cards:
# Home Assistant, Weather, and Mail and Packages
- type: vertical-stack
card_mod:
style: |
ha-card {--chip-box-shadow: none;
# --chip-font-size: 0.6em;
}
cards:
# Weather
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {--chip-font-size: 0.6em;}
alignment: center
chips:
Anyone had any luck with something like this?
can you share your code ?
Just the first one.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: 1 Cookie
- type: template
icon: mdi:cookie
icon_color: brown
content: 2 Cookies
card_mod:
style:
mushroom-template-chip$: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Is this what you wanted?
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:hamburger
content: Burger
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:french-fries
content: Fries
alignment: center
card_mod:
style:
hui-vertical-stack-card$: |
mushroom-chips-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-font-size: 0.6em;
}
Or this?
type: vertical-stack
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fish
content: Fish
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:french-fries
content: Chips
alignment: center
card_mod:
style:
hui-horizontal-stack-card$: |
mushroom-chips-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-font-size: 0.6em;
}
Try using a Grid with two columns.
I donāt get it but that worked perfectly! Thank You Cookie Monster!
Either one works if thatās affecting the font size of both chip cards. Thank you.
Iāve tried to research how to do things like this myself, but keep coming up empty handed. W3 schools explains the concepts with syntax for direct CSS, but often doesnāt translate for use in these Jinja-based dashboards. Do you recommend a resource for understanding things like the use of div, $, ., etc?
Also, why doesnāt your syntax require card_mod:?
Thanks again!
I should be using card_mod:. It is not required but is recommended and apparently provides better performance.
@rhysb Gotcha. Any recommendations for learning Jinja-style CSS?
I tried the syntax you provided. It works for the chip card in the first stack-in-card, but not the rest in the vertical stack. What changes should I make to get that to apply to the entire vertical stack with 4 stack-in-cards containing a mix of mushroom-chips-card, markdown cards, and mushroom-template-card ?
EDIT: Iāve inspected the elements (CTRL-SHIFT-I) to extract this hierarchy:
div #all columns
div #first column
hui-vertical-stack-card #THIS IS THE STACK IN THE SCREENSHOT ABOVE
shadow-root
div #root
stack-in-card
shadow-root
ha-card #custom-stack-in-card
shadow-root
div
hui-vertical-stack-card
shadow-root
div #root
mushroom-chips-card
shadow-root
ha-card #custom-mushroom-chips-card
shadow-root
div
mushroom-weather-chip
shadow-root
mushroom-chip
Using that, Iām trying to reverse your syntax to understand it a little more. From this, it looks like the $ is used any place thereās a shadow-root. If I basically used that same approach, would I be able to start at the lowest div in the hierarchy that contains all of the elements I would want to effect (e.g. all the way up to the column or columns level div)?