Documentation
v.1.6.2
GETTING STARTED
DYNAMIC ISLAND
BUTTONS
Library
Dynamic island 002
Dynamic island 002 provides an interactive contact module that expands upon clicking to reveal additional content. Simply apply the required attributes to a 'div' to define it as a contact island.
Preview
Open previewQuick Setup
data-contact-island
Required
Defines the element as a contact island.
data-expanded-content
Required
Defines the element as a contact island.
‘data-expanded-content’. This attribute marks content within the island that will only be visible when the island is expanded. Place it on a child element within data-contact-island to define which sections should appear upon expansion.
- Purpose: Controls visibility of the expanded content section.
- No specific value needed; just add this attribute to the content you want to be hidden initially and visible on expansion.
Advanced configuration
data-position
Optional
Sets the initial position of the island on the screen, allowing flexible placement based on user preference.
Default: bottom-right
top-left
top-center
top-right
bottom-left
bottom-right
bottom-center
data-edge-margin
Optional
Determines the margin between the island and the screen edges, helping you adjust its distance from the viewport’s sides.
Default: 20
data-width-expand
Optional
Adjusts the width of the island when expanded, creating a more prominent display.
Default: 0.2
data-height-expand
Optional
Controls the height increase when the island expands, offering more vertical space for additional content.
Default: 0.5
data-mobile-height-expand
Optional
Sets the expansion height specifically for mobile devices, allowing you to customize for smaller screens.
data-responsive-breakpoint
Optional
Sets the breakpoint in pixels for switching to a mobile layout, optimizing the island's appearance on smaller screens.
Default: 768
data-overlay-duration
Optional
Specifies the transition duration for the overlay effect when the island is expanded, creating a smooth background dimming effect.
Default: 0.5
data-overlay-opacity
Optional
Controls the opacity of the background overlay during expansion, increasing or reducing the dim effect.
Default: 0.5
data-overlay-blur
Optional
Sets the blur effect for the background overlay, creating a subtle depth effect.
Default: 5
data-icon-color
Optional
Sets the color of the contact icon.. Type: Color (e.g., #FF0000).
data-status-color
Optional
Defines the text color for the status label displayed within the contact island before it is expanded
data-icon
Optional
Define the icon you want to use from the Themify library. You can check the icons here: https://themify.me/themify-icons In the value field you have to put the name of the icon without the prefix ti. For example: email.
data-text
Optional
Defines the text that will be displayed to display the contact form.
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