mjml-head-attributes

What is mjml-head-attributes?

The mjml-head-attributes npm package is a part of the MJML framework, which is used to create responsive email templates. The mjml-head-attributes component allows you to define default attributes for MJML components within the <mj-head> section, making it easier to apply consistent styling across multiple components.

What are mjml-head-attributes's main functionalities?

Setting default attributes for MJML components

This feature allows you to set default attributes for MJML components like <mj-text> and <mj-button>. The provided code sample sets a default font size and color for <mj-text> components and a default background color for <mj-button> components.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text font-size="20px" color="#000000" />
      <mj-button background-color="#ff0000" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>This text will have a font size of 20px and color #000000.</mj-text>
        <mj-button>This button will have a background color of #ff0000.</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Overriding default attributes

This feature allows you to override the default attributes set in the <mj-attributes> tag. The provided code sample shows how a specific <mj-text> component can have its own font size and color, different from the default values.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text font-size="20px" color="#000000" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>This text will have a font size of 20px and color #000000.</mj-text>
        <mj-text font-size="25px" color="#ff0000">This text will override the default attributes and have a font size of 25px and color #ff0000.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Other packages similar to mjml-head-attributes

mjml

The mjml package is the core library of the MJML framework. It allows you to write responsive email templates using a simple markup language. While mjml-head-attributes is a specific component for setting default attributes, the mjml package provides the overall structure and components needed to build the entire email template.

mjml-head

The mjml-head package is another component of the MJML framework. It is used to define the head section of an MJML document, where you can include elements like <mj-title>, <mj-preview>, and <mj-attributes>. The mjml-head-attributes component is specifically for setting default attributes within the <mj-head> section.

mjml-core

The mjml-core package is the underlying engine that powers the MJML framework. It is responsible for parsing MJML code and converting it into responsive HTML. While mjml-head-attributes focuses on setting default attributes, mjml-core handles the overall rendering process.

README

mj-attributes

Inside mj-attributes, a tag citing one MJML component (like mj-text; see example) overrides default settings for listed MJML attributes on the one component.

An mj-all is like the above, but affects all MJML components via the one tag.

mj-class tags create a named group of MJML attributes you can apply to MJML components. To apply them, use mj-class="<name>".

<mjml>
 <mj-head>
   <mj-attributes>
     <mj-text padding="0" />
     <mj-class name="blue" color="blue" />
     <mj-class name="big" font-size="20px" />
     <mj-all font-family="Arial" />
   </mj-attributes>
 </mj-head>
 <mj-body>
   <mj-section>
     <mj-column>
       <mj-text mj-class="blue big">
         Hello World!
       </mj-text>
     </mj-column>
   </mj-section>
 </mj-body>
</mjml>

In the following list, MJML applies only the first MJML attributes found:

• inline MJML attributes,
• the entry for the same MJML component (like, "mj-text") in "mj-attributes",
• "mj-all" in "mj-attributes", and
• default MJML values.