I was using the custom card with the Mail and Packages component for a while until I learned how to use the picture elements card. I never liked the spacing of the original. This is how I created a very similar card with less of a footprint.
type: picture-elements
elements:
- type: image
entity: camera.mail_usps_camera
camera_image: camera.mail_usps_camera
style:
position: absolute
transform: 'translate(0%, 0%)'
top: 0%
background-color: 'rgba(0, 0, 0, 0)'
- type: state-label
entity: sensor.mail_deliveries_message
prefix: ''
style:
top: 68%
left: 50%
width: fit-content
text-align: center
font-size: .95em
- type: state-icon
entity: sensor.mail_packages_delivered
style:
transform: 'translate(0%, 0%)'
top: 70%
left: 2%
width: fit-content
- type: state-label
entity: sensor.mail_packages_delivered
suffix: ' delivered'
style:
transform: 'translate(0%, 0%)'
top: 71%
left: 8.5%
font-size: .9em
font-weight: bold
width: fit-content
- type: state-icon
entity: sensor.mail_packages_in_transit
style:
transform: 'translate(0%, 0%)'
top: 70%
left: 50%
width: fit-content
- type: state-label
entity: sensor.mail_packages_in_transit
suffix: ' in transit'
style:
transform: 'translate(0%, 0%)'
top: 71%
left: 56.5%
font-size: .9em
width: fit-content
font-weight: bold
- type: state-icon
entity: sensor.mail_fedex_delivering
style:
transform: 'translate(0%, 0%)'
top: 80%
left: 2%
width: fit-content
- type: state-label
entity: sensor.mail_fedex_delivering
prefix: 'Fedex: '
style:
transform: 'translate(0%, 0%)'
top: 81%
left: 8.5%
font-size: .875em
width: fit-content
- type: state-icon
entity: sensor.mail_ups_delivering
style:
transform: 'translate(0%, 0%)'
top: 80%
left: 27%
width: fit-content
- type: state-label
entity: sensor.mail_ups_delivering
prefix: 'UPS: '
style:
transform: 'translate(0%, 0%)'
top: 81%
left: 34%
font-size: .875em
width: fit-content
- type: state-icon
entity: sensor.mail_usps_delivering
style:
transform: 'translate(0%, 0%)'
top: 80%
left: 50%
width: fit-content
- type: state-label
entity: sensor.mail_usps_delivering
prefix: 'USPS: '
style:
transform: 'translate(0%, 0%)'
top: 81%
left: 57%
font-size: .875em
width: fit-content
- type: state-icon
entity: sensor.mail_amazon_packages
style:
transform: 'translate(0%, 0%) scale(1)'
top: 80%
left: 73%
width: fit-content
- type: state-label
entity: sensor.mail_amazon_packages
prefix: 'Amazon: '
style:
transform: 'translate(0%, 0%)'
top: 81%
left: 79.5%
font-size: .875em !important
width: fit-content
- type: state-label
entity: sensor.mail_updated
prefix: 'Checked: '
style:
transform: 'translate(0%, 0%)'
bottom: .5%
left: 1%
font-size: .75em
width: 50%
image: /local/smallcard.png
aspect_ratio: 72.5%