mj-social

Displays calls-to-action for various social networks with their associated logo. You can add social networks with the mj-social-element tag.

Here is the list of attribute you can use on this element -

• border-radius border-radius for the social icons.
• font-family
• font-size
• icon-size
• line-height
• mode vertical/horizontal
• text-decoration
• align Align the social icons respect to the container. left/right/center
• color
• inner-padding padding for each social icon.
• padding padding for the container.
• padding-top
• padding-bottom
• padding-left
• padding-right
• container-background-color

This component mj-social-element enables you to display a given social network inside mj-social. Note that default icons are transparent, which allows background-color to actually be the icon color.

Here is the following attributes you can use on the mj-social-element component -

• border-radius
• href
• target
• background-color
• font-family
• font-size
• icon-size
• icon-height
• text-decoration
• color
• name
• src
• padding padding for the container.
• padding-top
• padding-bottom
• padding-right
• padding-left
• target

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-social mode="vertical" inner-padding='30px'>

          <mj-social-element name="facebook" href="https://mjml.io/" background-color="#4d4d4d">
            Facebook
          </mj-social-element>

          <mj-social-element name="google" href="https://mjml.io/" background-color="#4d4d4d">
            Google
          </mj-social-element>

          <mj-social-element  name="instagram" href="https://mjml.io/" background-color="#4d4d4d">
            Instagram
          </mj-social-element>

        </mj-social>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>