Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
mjml-social
Advanced tools
Readme
`mj-social-element`'s `name` attribute is a shortcut for some common social elements.
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>
`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 |
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:
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
The npm package mjml-social receives a total of 353,652 weekly downloads. As such, mjml-social popularity was classified as popular.
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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.