Icon with text/Column within Column #2855
Comments
lindseydrennan
changed the title
|
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!
`
<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" /> 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>
`
***@***.*** (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
<#2855>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAELHTJYBOXBLZK2NMGZWNDY6EZNHAVCNFSM6AAAAABGPMK5PCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI2TGMRXHEYDSMI>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
`
`
Desired outlook
The text was updated successfully, but these errors were encountered: