mjml-social v4.15.3
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/" icon-color="#4d4d4d">
Facebook
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/" icon-color="#4d4d4d">
Google
</mj-social-element>
<mj-social-element name="instagram" href="https://mjml.io/" icon-color="#4d4d4d">
Instagram
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>
<mj-social-element href="url" background-color="#FF00FF" src="path-to-your-icon">
Optional label
</mj-social-element>
attribute | unit | description | default value |
---|---|---|---|
border-radius | px | border radius | 3px |
font-family | string | font name | Ubuntu, Helvetica, Arial, sans-serif |
font-size | px/em | font size | 13px |
icon-size | percent/px | icon size | 20px |
line-height | percent/px | space between lines | 22px |
mode | string | vertical/horizontal | horizontal |
text-decoration | string | underline/overline/none | none |
align | string | left/right/center | center |
color | color | text color | #333333 |
inner-padding | px | social network surrounding padding | 4px |
padding | px | supports up to 4 parameters | 10px 25px |
padding-top | px | top offset | n/a |
padding-bottom | px | bottom offset | n/a |
padding-left | px | left offset | n/a |
padding-right | px | right offset | n/a |
container-background-color | color | inner element background color | n/a |
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 |
---|---|---|---|
border-radius | px | border radius | 3px |
href | url | button redirection url | [SHORT_PERMALINK] |
background-color | color | icon color | Each social name has its own default |
font-family | string | font name | Ubuntu, Helvetica, Arial, sans-serif |
font-size | px/em | font size | 13px |
icon-size | percent/px | icon size | 20px |
line-height | percent/px | space between lines | 22px |
mode | string | vertical/horizontal | horizontal |
text-decoration | string | underline/overline/none | none |
text-mode | string | display social network name | true |
align | string | left/right/center | center |
color | color | text color | #333333 |
name | string | facebook google instagram pinterest linkedin twitter | N/A |
src | url | image source | Each social name has its own default |
inner-padding | px | social network surrounding padding | 4px |
padding | px | supports up to 4 parameters | 10px 25px |
padding-top | px | top offset | n/a |
padding-bottom | px | bottom offset | n/a |
padding-left | px | left offset | n/a |
padding-right | px | right offset | n/a |
target | string | usual html link target | _blank |
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago