Documentation
v.1.6
GETTING STARTED
DYNAMIC ISLAND
Premium element
Interaction
Social Bloom
The Social Bloom Effect creates a vibrant, interactive card that showcases social links and information in a visually stunning format.
Preview
Open previewQuick Setup
data-social-card
Required
Enables the Social Bloom card on the specified container and applies the chosen style and settings.
Available Presets
data-card-gradient="preset-name"
Optional
monterey
bigsur
catalyst
ventura
sonoma
quantum
aurora
carbon
silver
space
Custom Colors
data-circles-colors
Optional
Sets custom colors for the circles. Provide a comma-separated list of rgba values to define the colors.
Example: rgba(255,87,34,0.6),rgba(255,152,0,0.6),rgba(255,235,59,0.6)
Advanced configuration
data-card-width
Optional
Defines the width of the card .
Default: 200px
data-card-height
Optional
Defines the height of the card.
Default: 200px
data-card-border-radius
Optional
Specifies the card’s border radius for rounded edges.
Default: 30px
data-title-color
Optional
Sets the color of the title text.
Default: #ffffff
data-font-family
Optional
Defines the font style used for the card content.
Default: system-ui
data-social-{number}-network
Optional
Specifies the name of the social network (e.g., Facebook, Twitter, Instagram). This name is used for accessibility purposes and tooltips. Example: data-social-1-network="Facebook"
data-social-{number}-url
Optional
Defines the URL for the specific social network. When users click on the social icon, they are directed to this link. Example: data-social-1-url="https://facebook.com/your-profile
What Happens If a Value Is Missing?
- If
data-social-{number}-urlis missing, the link won’t work. - If
data-social-{number}-networkis missing, accessibility labels for screen readers and tooltips will not display correctly.
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours