@ecomailcz/mjml-social
v4.4.0-ecm-27
Published
@ecomailcz/mjml-social
Downloads
4
Readme
mjml-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 | [[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:
- 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>