Social Block
The Social Block is a block that allows you to display links to your social media accounts in your email. It supports several options to help you customize the appearance of your social media icons.
Options
ISocialBlockOptions
The Social Block options interface, ISocialBlockOptions
, includes the following properties:
align
(type:TAlign
): The alignment of the social media icons.mode
(type:"vertical" | "horizontal"
): The layout of the social media icons.font
(type:IFont
): The font options for the label of the social media icons.iconSize
(type:ILineHeight
): The size of the social media icons.lineHeight
(type:ILineHeight
): The line height of the label of the social media icons.color
(type:string
): The color of the label of the social media icons.innerPadding
(type:IPadding
): The inner padding around the social media icons.padding
(type:IPadding
): The outer padding around the social media icons.
The Social Block options also include a ISocialNetwork
interface for specifying the details of each social media
network.
ISocialNetwork
The ISocialNetwork
interface includes the following properties:
href
(type:string
): The URL of the social media profile.target
(type:string
): The target window for opening the social media profile link.label
(type:string
): The label text for the social media icon.name
( type:"github" | "instagram" | "web" | "snapchat" | "youtube" | "vimeo" | "medium" | "soundcloud" | "facebook" | "twitter" | "pinterest" | "linkedin" | "tumblr" | "xing"
): The name of the social media network to display.padding
(type:IPadding
): The padding around the social media icon.
Usage
To use the Social Block in your email, you can create a new instance of the SocialBlock
class and customize its
options and network details. Here’s an example:
In this example, we’ve created an array of ISocialNetwork
objects, representing the social networks we want to display
in the Social Block.
We’ve then customized the appearance of the block using the available options, including the alignment, font, icon size, padding, and more.
Finally, we’ve passed the array of social networks to the toObject()
method of the Social Block.
{% hint style=“info” %}
Note: The ISocialNetwork
interface extends the ILink
interface, which provides the href
and target
properties for the link.
{% endhint %}