mjml-social-4-terser
v4.15.5
Published
mjml-social
Downloads
938
Readme
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-element name="x" href="https://mjml.io/">
X
</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 | ''
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:
- x
- tumblr
Without a share url:
- github
- 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.