You can also use mj-social this way with no `href` attribute to make a simple list of inlined images-texts. You can add any unsupported network like this: branding elements and social icons -> To keep your `href` unchanged, add `-noshare` to the network name.When using a network with share url, the `href` attribute will be inserted in the share url (i.e. Title | string | img title attribute | none Src | url | image source | Each social `name` has its own default To review, open the file in an editor that reveals hidden Unicode characters. Text-padding | px | padding around the text | 4px 4px 4px 0 email.mjml This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. Icon-padding | px | padding around the icon | 0px Padding | px | supports up to 4 parameters | 4px Name | string | social network name, see supported list below | N/A Href | url | button redirection url | none Note that default icons are transparent, which allows `background-color` to actually be the icon color.Īlt | string | image alt attribute | noneÄ«ackground-color | color | icon color | Each social `name` has its own default This component enables you to display a given social network inside `mj-social`. Text-decoration | string | underline/overline/none | none Text-padding | px | padding around the texts | 4px 4px 4px 0 Icon-padding | px | padding around the icons | 0px Padding-bottom | px | bottom offset | n/a Padding | px | supports up to 4 parameters | 10px 25px Mode | string | vertical/horizontal | horizontal Line-height | percent/px | space between lines | 22px Note that default icons are transparent, which allows background-color to actually. Inner-padding | px | social network surrounding padding | 4pxIcon-size | percent/px | icon size (width and height) | 20px Icon-height | percent/px | icon height, overrides icon-size | icon-size |-|-|-Īlign | string | left/right/center | centerĬss-class | string | class name, added to the root HTML element created | n/aĬontainer-background-color | color | inner element background color | n/aįont-family | string | font name | Ubuntu, Helvetica, Arial, sans-serifįont-style | string | font style | normalįont-weight | string | font weight | normal Once you have the structure in place, the rest is just styling and adjustment to make sure your template is optimized and accessible. You can even generate social media icons for the most popular platforms when you use the and components. You can add social networks with the `mj-social-element` tag.Īttribute | unit | description | default value You can see how this template is responsive and adjusts automatically on smaller screen sizes by clicking the mobile icon at the top of the Try it Live previews. For example, if you want to create a button in MJML, you would use the component , specify your text, fonts, and colors with some inline CSS, if necessary, and youâre done.Displays calls-to-action for various social networks with their associated logo.
0 Comments
Leave a Reply. |