mjml-social

mj-social

Displays calls-to-action for various social networks with their associated logo. You can add multiple social networks using mj-social-element tags.

<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-element name="x" href="https://mjml.io/">
            X
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Attributes

attribute	accepts	description	default value
align	left right center	align content	center
border	string	icon border, applied to each mj-social-element
border-radius	px %	border radius	3px
color	CSS color formats	text color	#333333
css-class	string	class name, added to the root HTML element created
container-background-color	CSS color formats	inner element background color
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px	font size	13px
font-style	string	font style	normal
font-weight	string	font weight	normal
icon-height	px %	icon height, overrides icon-size	icon-size
icon-padding	px %	padding around the icons
icon-size	px %	icon size (width and height)	20px
inner-padding	px %	social network surrounding padding	null
line-height	px %	space between lines	22px
mode	horizontal vertical	direction of social elements	horizontal
padding	px %	social padding, supports up to 4 parameters	10px 25px
padding-bottom	px %	bottom padding
padding-left	px %	left padding
padding-right	px %	right padding
padding-top	px %	top padding
text-padding	px %	padding around the text
text-decoration	string	CSS values, e.g. underline overline none	none

Try it live

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.

Attributes

attribute	accepts	description	default value
align	left center right	align content	center
alt	string	image alt attribute	''
background-color	CSS color formats	icon color	Each social name has its own default
border	string	icon border (CSS shorthand), applied to the <img>	0
border-radius	string	border radius	3px
color	CSS color formats	text color	#000
css-class	string	class name, added to the root HTML element created
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px	font size	13px
font-style	string	font style
font-weight	string	font weight
href	string	button redirection, in URL format
icon-height	percent/px	icon height, overrides icon-size	icon-size
icon-padding	px %	padding around the icon
icon-position	left right	sets the side of the icon
icon-size	px %	icon size (width and height)
line-height	px %	space between lines	1
name	string	social network name, see supported list below
padding	px %	social element padding, supports up to 4 parameters	4px
padding-bottom	px %	bottom padding
padding-left	px %	left padding
padding-right	px %	right padding
padding-top	px %	top padding
rel	string	specify the rel attribute for the link
sizes	string	set icon width based on query
src	string	image source, in URL format	Each social name has its own default
srcset	string	enables to set a different image source based on the viewport, using CSS syntax
target	string	link target	_blank
text-decoration	string	CSS values, e.g. underline overline none	none
text-padding	px %	padding around the text	4px 4px 4px 0
title	string	image title attribute
vertical-align	top middle bottom	vertically align elements	middle

Supported networks with a share url:

• facebook
• twitter
• x
• 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.