Headspin Logo
1.3.0
Wireframes
Hero 64

Hero 64

Published
March 14, 2024
Category
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)
Image 2 (3)

We convert small biz to customer love.

By leveraging cutting-edge technology and fostering a culture of creativity and collaboration, your organization can unlock its full potential and stay ahead of the competition.

Add to collection

Overview

All configuration settings for this section can be located within the Custom CSS section of the element whose name includes "Images CSS".

Capabilities:

  • To adjust the gap between images and columns, modify the value of the --image-list-gap variable.
  • The animation duration can be set using --image-list-duration.
  • Image height is controlled via --image-item-height.
  • For a reduced height on mobile devices, utilize --image-item-height-mobile.

You might also like

Find more about Headspin UI

Headspin Logo
1.3.0

Products

Copilot Wireframes Sites Components

Resources

Documentation Guides Inspiration Tutorials Blog Support Pricing Changelog Roadmap Testimonials

Community

Facebook X Discord

Legal

Privacy Policy Cookie Policy Terms and Conditions License
Built with
Breakdance
and
Headspinui
@ 2024 HeadspinUI. All rights reserved.
'; //document.body.appendChild(iframe); var html = document.querySelector("html").outerHTML; var body = target.outerHTML; target.replaceWith(iframe); iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); //document.querySelector("iframe").contentWindow.document.querySelector("body").innerHTML = body; iframe.onload = (event) => { iframeCleaner(); }; var doc = iframe.contentDocument || iframe.contentWindow; var _timer = setInterval(function() { console.log("timer-load"); if (doc.readyState == 'complete') { clearInterval(_timer); iframeCleaner(); } }, 100); } function iframeCleaner(){ var doc = document.querySelector("iframe").contentWindow.document; var sections = doc.querySelectorAll("body > *"); sections.forEach(section=>{ if(section.tagName != "MAIN") section.remove(); }); if(doc.querySelector(".mbfp-btn")) doc.querySelector(".mbfp-btn").remove(); } /**/ const targetNode = document.querySelector("html"); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: false, subtree: false }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type === "childList") { console.log("A child node has been added or removed."); } else if (mutation.type === "attributes") { var att = targetNode.getAttribute("data-hsx"); var iframe = document.querySelector("iframe"); if(iframe) { iframe.contentWindow.document.querySelector("html").setAttribute("data-hsx",att) } } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); })