Headspin Logo
1.2.3
Wireframes
Hero 8

Hero 8

Published
March 13, 2024
Category

We convert small biz to customer love.

Our passion is transforming small businesses into customer magnets with personalized solutions that build lasting relationships.

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)
Add to collection

Overview

All configuration settings for this section can be located within the Custom CSS section of the element whose name includes "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.2.3

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); })