mjml-social

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.