mjml-head-style
Advanced tools
Comparing version 3.3.0 to 3.3.5
{ | ||
"name": "mjml-head-style", | ||
"description": "mjml-head-style", | ||
"version": "3.3.0", | ||
"version": "3.3.5", | ||
"main": "lib/index.js", | ||
@@ -6,0 +6,0 @@ "repository": { |
## mjml-style | ||
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 | ||
```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> | ||
</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> | ||
<mj-image width="100" src="/assets/img/logo-small.png"></mj-image> | ||
<mj-image width="100" src="/assets/img/logo-small.png"></mj-image> | ||
<mj-divider border-color="#F45E43"></mj-divider> | ||
<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-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> | ||
``` | ||
</mj-column> | ||
</mj-section> | ||
</mj-container> | ||
</mj-body> | ||
</mjml> | ||
``` | ||
<p align="center"> | ||
<a href="https://mjml.io/try-it-live/components/head-style"> | ||
<img width="100px" src="http://imgh.us/TRYITLIVE.svg" alt="sexy" /> | ||
</a> | ||
</p> | ||
<p align="center"> | ||
<a href="https://mjml.io/try-it-live/components/head-style"> | ||
<img width="100px" src="http://imgh.us/TRYITLIVE.svg" alt="sexy" /> | ||
</a> | ||
</p> | ||
attribute | unit | description | default value | ||
---------------------|---------------|-------------------------------------|--------------- | ||
inline | string | set to "inline" to inline styles | n/a |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2471
51
1