Align text of Heading card

Configuration Frontend
1

Using themes and/or card_mod I have been able to change the font size of the text displayed in a Heading card (either title or subtitle), but…

I CANNOT change the alignment of that text.

I suspect this is because the actual text placement section is on the left so ‘badges’ (entities) can be displayed on the right. So no simple CSS modification can move the test to the RHS.

How can I then place some form of heading above an Entities card, with its heading aligned to the RHS?

Flummoxed is the word I’d use, but it’s late. Anyway, suggestions as to how I can achieve right aligned header text would be much appreciated. :slightly_smiling_face:

2

Show your SHORT example with your failed attempt + screenshot of what you want to change.

3

If heading card does not meet your needs you can use another card like custom:button-card with more options.

4

Answered here

A Ildar stated, your code will help. The method to realign the text is based on how the card is used in your dashboard.

An example to start with :arrow_down:

type: heading
heading: Example Heading
heading_style: subtitle
card_mod:
  style: |
    .container  {
     justify-content: end !important;
     }
5

Here is my example code where I replaced one of my heading cards by a custom:button-card.

It does not look 100% exactly the same but it’s very close.

type: custom:button-card
name: |
  [[[
      return 'Label Name';
  ]]]
icon: mdi:home-assistant
show_state: false
show_label: false
custom_fields:
  greater: "  ›"
styles:
  card:
    - background: none
    - border: none
    - padding: 28px 30px 2px 0px
  grid:
    - grid-template-areas: "'i n greater empty'"
    - grid-template-columns: 8% max-content max-content 1fr
  icon:
    - width: 20px
    - height: 20px
  name:
    - font-size: 16px
    - font-weight: 400
    - text-align: left
    - place-self: center start
  custom_fields:
    greater:
      - font-size: 22px
      - font-weight: 400
tap_action:
  action: none
grid_options:
  columns: full

The reason for me, to do it like that was, because I needed a dynamic title and a dynamic tap_action, but this part of the code is not shown here.

6

Thanks, almost there. :slightly_smiling_face:

First of all, could you explain what that is doing. It has moved the text box over to the right, but the text is not right aligned to the edge of the card, there’s still a bit of a gap, as if the text box has been shifted but the text in the box is still left aligned and adding a ‘text-align: right’ line makes no difference.

I’m just not sure what the ‘justify…’ line is actually doing. Can I get the text shifted fully to the right edge?