Skip to content

Latest commit

 

History

History
153 lines (133 loc) · 7.82 KB

README.md

File metadata and controls

153 lines (133 loc) · 7.82 KB
Raw

mj-social

desktop

`mj-social-element`'s `name` attribute is a shortcut for some common social elements.
You should avoid rely too much on this as those icons are hosted by Mailjet for their Email Builder.
Use custom element syntax instead.

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

try it live

`mj-social-element` is an "ending tag", which means it can contain HTML code which will be left as it is, so it can contain HTML tags with attributes, but it cannot contain other MJML components. More information about ending tags in this section.
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 ''
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
icon-position string left/right right
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
  • 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.