Icon with text/Column within Column

[lindseydrennan]

I'm wanting to do a small container fun fact section in an email. It has an icon next to the title, but can't figure out how to achieve this in MJML. I need everything to be in the same column because of the border-radius and background-color. I tried doing an img html tag for the image, but then in HTML the widths of the image aren't honored on a lot of platforms, so trying to figure out how to do it with MJML. I have quite a few sections that have this pattern, so need help! At the very least support border-radius for specific corners.

`

<mj-section padding="20px">
  <mj-column vertical-align="middle" padding="20px" background-color="#ebf6fe" border-radius="12px">
    <mj-text align="left" color="#00599c" font-family="Source Code Pro, Courier New, monospace" font-weight="400" font-size="18px" line-height="28px" padding="0px 0px 10px 0px">
      <img src="https://go.fleetio.com/rs/963-TNN-621/images/blue-light-bulb.png" href="https://fleetio.com" width="25px" align="left" target="_blank" alt="light bulb icon" />&nbsp;DID YOU KNOW?
    </mj-text>
    <mj-text align="left" color="#3A4245" font-family="Inter, helvetica, Helvetica, sans-serif" font-weight="regular" font-size="16px" line-height="25px" padding="0px">Lorem ipsum dolor sit amet consectetur. Amet adipiscing vivamus in aliquet ac nisi auctor quisque. Ut justo odio malesuada ornare suscipit at urna.</mj-text>
  </mj-column>
</mj-section>

`

Desired outlook

[iRyusa]

The easiest way would be to just resize the img down to the desired width. MJML wrap image in table to ensure the size is actually respected, but it might be overkilled for you here.

On Fri, Apr 19, 2024 at 5:25 PM Lindsey Drennan @.***> wrote:

I'm wanting to do a small container fun fact section in an email. It has an icon next to the title, but can't figure out how to achieve this in MJML. I need everything to be in the same section because of the border-radius and background-color. I tried doing an html tag for the image, but then in HTML the widths of the image aren't honored on a lot of platforms, so trying to figure out how to do it with MJML. I have quite a few sections that have this pattern, so need help!

`

 DID YOU KNOW? Lorem ipsum dolor sit amet consectetur. Amet adipiscing vivamus in aliquet ac nisi auctor quisque. Ut justo odio malesuada ornare suscipit at urna.

`

@.*** (view on web) https://github.com/mjmlio/mjml/assets/109752487/fcc424ba-a196-4f49-82f5-73a558229b23 Desired outlook

— Reply to this email directly, view it on GitHub https://github.com/mjmlio/mjml/issues/2855, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELHTJYBOXBLZK2NMGZWNDY6EZNHAVCNFSM6AAAAABGPMK5PCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI2TGMRXHEYDSMI . You are receiving this because you are subscribed to this thread.Message ID: @.***>