Social
Usage
The ShSocial constructor creates a display format showcasing a Social Media post.
X (Twitter) embeded post
::ShSocial
---
src: "1757162766115176926"
---
::
Facebook Embeded Post
::ShSocial
---
src: "https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FNASA%2Fposts%2Fpfbid0KzFf9KDNS8zh4Cngx22ec2aeRHBYcQk4KkescRzoW2hUMpH6Yuc13smPmLww95qNl&show_text=true&width=500"
---
::
LinkedIn Embeded Post
::ShSocial
---
src: "https://www.linkedin.com/embed/feed/update/urn:li:share:7161263277866422272"
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
src | string | "" | The source URL of the Social Media post; Facebook, LinkedIn, X (formally Twitter) to be displayed. |
width | string | "500" | The width of the embedded Facebook or LinkedIn iframe. |
height | string | "" | The height of the embedded post. Initial height for X posts, which then auto-resize to fit the post. Facebook and LinkedIn iframes use fixed heights (410 and 650) regardless of this value. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | flex p-4 justify-center | Defines the overall styling for the container that holds all the elements of the Social Media post. The attribute `shadow-xl` is used to provide a shadow effect around the wrapper. |
facebook | bg-white dark:bg-white rounded-md border border-neutral-300 | Additional styling for Facebook posts. |
linkedin | max-w-none | Additional styling for LinkedIn posts. |
linkedinWrapper | overflow-hidden rounded-[14px] bg-white | Clips the LinkedIn iframe to rounded corners and hides its scrollbar. |
twitter | rounded-[14px] | Additional styling for X (Twitter) posts. |
