mjml-social
Advanced tools
The mjml-social npm package is a part of the MJML framework, which is designed to simplify the creation of responsive email templates. The mjml-social component specifically allows you to easily add social media icons and links to your email templates, ensuring they are both visually appealing and functional across different email clients.
Basic Social Icons
This feature allows you to add basic social media icons to your email template. The code sample demonstrates how to include Facebook and Twitter icons with links to your respective social media pages.
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-social>
<mj-social-element name="facebook" href="https://facebook.com/yourpage" />
<mj-social-element name="twitter" href="https://twitter.com/yourpage" />
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>Custom Social Icons
This feature allows you to use custom icons for your social media links. The code sample shows how to replace the default Facebook and Twitter icons with custom images.
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-social>
<mj-social-element name="facebook" href="https://facebook.com/yourpage" src="https://path-to-your-custom-icon/facebook.png" />
<mj-social-element name="twitter" href="https://twitter.com/yourpage" src="https://path-to-your-custom-icon/twitter.png" />
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>Social Icons with Custom Styles
This feature allows you to customize the style of your social media icons, including their size and layout. The code sample demonstrates how to set the icon size to 30px and arrange the icons horizontally with custom background colors.
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-social icon-size="30px" mode="horizontal">
<mj-social-element name="facebook" href="https://facebook.com/yourpage" background-color="#3b5998" />
<mj-social-element name="twitter" href="https://twitter.com/yourpage" background-color="#1da1f2" />
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>The react-social-icons package provides a set of customizable social media icons for React applications. Unlike mjml-social, which is specifically designed for email templates, react-social-icons is intended for use in web applications built with React. It offers a wide range of social media icons and allows for easy customization of their appearance.
The social-media-icons package is a simple library for adding social media icons to web pages. It is not specifically designed for email templates like mjml-social, but it provides a straightforward way to include social media links on websites. The package includes a variety of icons and allows for basic customization.
Font Awesome is a popular icon library that includes a wide range of social media icons. While it is not specifically designed for email templates, it can be used to add social media icons to both web pages and emails. Font Awesome offers extensive customization options and a large collection of icons beyond just social media.
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 |
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 | 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:
Without a share url:
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>
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.
FAQs
mjml-social
We found that mjml-social demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.