Font size on entity card

Configuration Frontend
1

Hi all,

I’m struggling with something that I suspect is really simple. I’m still very new to HA, so please excuse my ignorance and and forum faux pas, first time poster.

I’m trying to set up a simple clock. I’ve done the sensor.time bit and that’s fine.

I’ve set the icon to mdi:void to get rid of the little clock icon as I only want the time.

image

I’d like it to be a larger font and centralized, but I’m struggling. At the moment, on the card I have the following:

type: entities
entities:
  - entity: sensor.time
    icon: void
    name: ' '
    secondary_info: none
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 50px
        }
state_color: false
show_header_toggle: false

I believe I’ve got card_mod installed and an available resource

image
image1524×391 17.3 KB

But I can’t get the clock to display any bigger. Any ideas?

2

You might struggle with the centering too as the space occupied by the icon and title will still be there. Instead you could use a mushroom template card (for example):

  - type: custom:mushroom-template-card
    primary: "{{ states('sensor.time') }}"
    style: |
      ha-card { 
        align-items: center; 
        --card-primary-font-size: 50px
      }

image

2 Likes
3
  1. As a card-mod-beginner - better to start with a simpler tasks. Go to the huge card-mod thread → 1st post → link the bottom → Entities card. You will find examples with fonts, could be a starting point.
  2. Since you are already sure that you need to use card-mod - what is a reason to create a separate thread for this? Suggest to ask all card-mod related questions in that dedicated thread to avoid cluttering; not to mention that you will get answers faster & solutions will be kept in 1 place.
  3. Achieving your goal with “Entities + card-mod” is a goof challenge (for education at least). You might also (in addition, not “instead”) consider a custom:button-card (also - there is a dedicated thread).
4

Amazing! This got me where I needed to be, thank you!

type: custom:mushroom-entity-card
entity: sensor.time
name: ' '
style: |
  ha-card { 
    align-items: center; 
    --card-secondary-font-size: 103px
    }

image

5

Thanks for your response! I’ll bear this in mind for other things I’m doing :+1:

6

For anybody looking for the finished thing, here is it.

type: custom:mushroom-entity-card
entity: sensor.time
name: ' '
icon_type: none
style: |
  ha-card { 
    align-items: center;
    --secondary-text-color: white;
    --card-secondary-font-size: 103px
    }

image