Have ideas to improve npm?Join in the discussion! »

    mjml-social

    4.10.0 • Public • Published

    mj-social

    desktop

    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>

    try it live

    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 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:

    • facebook
    • twitter
    • google
    • pinterest
    • linkedin
    • tumblr
    • xing

    Without a share url:

    • github
    • instagram
    • 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.

    Keywords

    none

    Install

    npm i mjml-social

    DownloadsWeekly Downloads

    181,436

    Version

    4.10.0

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    6

    Homepage

    mjml.io

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar