mjml-head-style - npm Package Compare versions

package.json

README.md

		## mjml-style

		This tag allows you to use CSS styles for the <b>HTML</b> in your MJML document. This CSS style will be inlined on the final HTML document.
		This tag allows you to set CSS styles that will be applied to the <b>HTML</b> in your MJML document as well as the HTML outputted. The CSS styles will be added to the head of the rendered HTML by default, but can also be inlined by using the `inline="inline"` attribute.
		```xml
		<mjml>
		<mj-head>
		<mj-style>
		@media all and (max-width: 480px) {
		div[style*="color:#F45e46;"] {
		text-align: center !important
		}
		}
		</mj-style>
		<mj-style inline="inline">
		.link-nostyle {
		color: inherit;
		text-decoration: none
		}
		</mj-style>
		</mj-head>
		<mj-body>
		<mj-container>
		<mj-section >
		<mj-column>

		```xml
		<mjml>
		<mj-head>
		<mj-style>
		.red-color {
		color: red;
		}
		</mj-style>
		</mj-head>
		<mj-body>
		<mj-container>
		<mj-section>
		<mj-column>
		<mj-text>
		<p class="red-color">Hello World!</p>
		</mj-text>
		</mj-column>
		</mj-section>
		</mj-container>
		</mj-body>
		</mjml>
		<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

		<mj-divider border-color="#F45E43"></mj-divider>

		<mj-text font-size="20px" color="#F45e46" font-family="helvetica">
		Hello <a href="https://mjml.io" class="link-nostyle">World</a>
		</mj-text>

		</mj-column>
		</mj-section>
		</mj-container>
		</mj-body>
		</mjml>
		```
		@@ -27,0 +40,0 @@

New alerts