Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
8 contributors

Users who have contributed to this file

@kmcb777 @iRyusa @twisty @ngarnier @loeck @gileri @WeshGuillaume @dhuf
134 lines (116 sloc) 6.68 KB

mjml-social

desktop

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>

try it live

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 [[SHORT_PERMALINK]]
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
mode string vertical/horizontal horizontal
name string social network name, see supported list below N/A
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 icon 0px
text-padding px padding around the text 4px 4px 4px 0
src url image source Each social name has its own default
target string link target _blank
title string img title attribute none
text-decoration string underline/overline/none none

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’t perform that action at this time.