MJML v3.3.0: more interactivity with mj-accordion, media queries and more 🎨
MJML’s mission is to make responsive email easy by abstracting complex email HTML. This, however, doesn’t mean that it should be done at the cost of flexibility and control over your email. We’re proud to introduce in this new release support for media queries and two new components, including the interactive mj-accordion!
MJML v3.3.0 is currently in beta but can already be used on https://mjml.io/try-it-live or locally via npm install mjml@beta.
Full support for media queries in MJML 📱
In MJML v3.0.0, we introduced mj-style to enable you to streamline your styles in an efficient way. Since then, a common request was the support of media queries, especially since Gmail now supports them, which we’re happy to deliver today!
Now, mj-style no longer inlines styles by default but rather prints the style in the head of the HTML generated, which means you can freely use media queries. However, you can still inline styles by using the inline="inline" attribute. Below is an example where mj-style is used to center text on mobile through a media query and inline styles to override the default blue links.
Your emails just got cooler with mj-accordion 🕶️
Interactivity is one of the big trends in email lately, and that’s something we’ve started tackling before with mj-navbar and mj-carousel.
We’re definitely not stopping here and will add more in future releases (feel free to suggest cool components on Twitter and Slack!), starting today with mj-accordion! The accordion component is pretty handy to stack a lot of information in tabs, so it doesn’t bloat up the layout, especially on mobile. If opened on an email client that doesn’t support interactions (here’s a detailed view of the client compatibility), the tabs will be unwrapped so all the information is visible to the reader.
mj-wrapper for beautiful nested layouts 📦
Something asked by the community as well was the ability to wrap several sections in a component. That’s exactly what mj-wrapper is here for: you can now easily create nested layouts by adding borders and background-color to the wrapper, the section and the column.
What’s next? 🔮
We’re convinced you’ll find these new features as exciting as us and can’t wait to see what you build with those new components. Stay tuned as there’s always more to come!
Interested in MJML? Join the team and the community on Slack, Twitter and always keep up to date by subscribing to the newsletter on https://mjml.io.
