Can anyone help me to align image and text?

Configuration Frontend
1

I created a markdown card with this code:

    - type: markdown
      card_mod:
        style: |
          ha-card.type-markdown {
            box-shadow: none;
          }
      content: >
        <img align="left" src = '/local/images/cure2.png'></img><font
        color='#0061AF'> **AFVALBEHEER**</font> Today is
        {{as_timestamp(states("sensor.date"),'%d-%m-%Y')|timestamp_custom('%A,
        %d %b, %Y')}}

And it look like this:

image

Can anyone help me to make it like this?

image

If this is not possible using markdown card, which card is possible?

2

I don’t think the Markdown card really does HTML rendering (although I’ve never looked at it closely, so I might be wrong). I did a search for Home Assistant HTML card and found this:

Maybe it will do what you want? It hasn’t been updated in four years, so YMMV.

1 Like
3

Use &nbsp; between the code tags.

4

Finally I got it. Not really aligned, but OK:

image

Here is the code using custom:button-card and markdown, stacked horizontally.

type: custom:mod-card
card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
      box-shadow: none;
    }
card:
  type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                border-width: 0;
                border-radius: 10px 0px 0px 10px;
              }
          entity_picture: /local/images/cure2.png
          show_entity_picture: true
          size: 58px
          styles:
            card:
              - height: 55px
              - width: 88px
            img_cell:
              - justify-content: left
              - padding-left: 30px
        - type: markdown
          card_mod:
            style: |
              ha-card.type-markdown {
                box-shadow: none;
                border-width: 0;
                border-radius: 0px 10px 10px 0px;
              }
          content: >
            <font color='#0061AF'> **AFVALBEHEER**</font> -
            {{as_timestamp(states("sensor.date"),'%d-%m-%Y')|timestamp_custom('%A,
            %d %b, %Y')}}