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.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-social font-size="15px" icon-size="30px" mode="horizontal">
          <mj-social-element name="facebook" href="https://mjml.io/">
            Facebook
          </mj-social-element>
          <mj-social-element name="google" href="https://mjml.io/">
            Google
          </mj-social-element>
          <mj-social-element  name="twitter" href="https://mjml.io/">
            Twitter
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

attribute | unit | description | default value ----------------------------|-------------|-------------------------------|--------------------------- align | string | left/right/center | center border-radius | px | border radius | 3px color | color | text color | #333333 css-class | string | class name, added to the root HTML element created | n/a container-background-color | color | inner element background color | n/a font-family | string | font name | Ubuntu, Helvetica, Arial, sans-serif font-size | px/em | font size | 13px font-style | string | font style | normal font-weight | string | font weight | normal icon-height | percent/px | icon height, overrides icon-size | icon-size icon-size | percent/px | icon size (width and height) | 20px inner-padding | px | social network surrounding padding | 4px line-height | percent/px | space between lines | 22px mode | string | vertical/horizontal | horizontal padding | px | supports up to 4 parameters | 10px 25px padding-bottom | px | bottom offset | n/a padding-left | px | left offset | n/a padding-right | px | right offset | n/a padding-top | px | top offset | n/a icon-padding | px | padding around the icons | 0px text-padding | px | padding around the texts | 4px 4px 4px 0 text-decoration | string | underline/overline/none | none

mj-social-element

This component 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.

attribute | unit | description | default value ----------------------------|-------------|-------------------------------|--------------------------- align | string | left/right/center | center alt | string | image alt attribute | none background-color | color | icon color | Each social name has its own default border-radius | px | border radius | 3px color | color | text color | #333333 css-class | string | class name, added to the root HTML element created | n/a font-family | string | font name | Ubuntu, Helvetica, Arial, sans-serif font-size | px/em | font size | 13px font-style | string | font style | normal font-weight | string | font weight | normal href | url | button redirection url | none icon-height | percent/px | icon height, overrides icon-size | icon-size icon-size | percent/px | icon size (width and height) | 20px line-height | percent/px | space between lines | 22px name | string | social network name, see supported list below | N/A padding | px | supports up to 4 parameters | 4px padding-bottom | px | bottom offset | n/a padding-left | px | left offset | n/a padding-right | px | right offset | n/a padding-top | px | top offset | n/a icon-padding | px | padding around the icon | 0px text-padding | px | padding around the text | 4px 4px 4px 0 sizes | media query & width | set icon width based on query | n/a src | url | image source | Each social name has its own default srcset | url & width | set a different image source based on the viewport | n/a rel | string | specify the rel attribute for the link | n/a target | string | link target | _blank title | string | img title attribute | none text-decoration | string | underline/overline/none | none vertical-align | string | top/middle/bottom | middle

Supported networks with a share url:

• facebook
• twitter
• google
• pinterest
• linkedin
• tumblr
• xing

Without a share url:

• github
• instagram
• web
• snapchat
• youtube
• vimeo
• medium
• soundcloud
• dribbble

When using a network with share url, the href attribute will be inserted in the share url (i.e. https://www.facebook.com/sharer/sharer.php?u=[[URL]]). To keep your href unchanged, add -noshare to the network name. Example :

<mj-social-element name="twitter-noshare" href="my-unchanged-url">Twitter</mj-social-element>

Custom Social Element

You can add any unsupported network like this:

<mj-social-element href="url" background-color="#FF00FF" src="path-to-your-icon">
  Optional label
</mj-social-element>

You can also use mj-social this way with no href attribute to make a simple list of inlined images-texts.