CONVERTED JS v1.0

Copy Etch JSON Open raw preview ↗ Copied!

{"type":"block","gutenbergBlock":{"blockName":"etch/element","attrs":{"metadata":{"name":"Brixie's — Hero Gallery"},"tag":"div","attributes":{"data-etch-element":"div"}},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Gallery"},"tag":"section","attributes":{"data-etch-element":"section","class":"hero-gallery"},"styles":["etch-section-style","8314026"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Container"},"tag":"div","attributes":{"data-etch-element":"container","class":"hero-gallery__container"},"styles":["etch-container-style","f576802"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Container info"},"tag":"div","attributes":{"class":"hero-gallery__container-info"},"styles":["7a796d5"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Tagline"},"tag":"p","attributes":{"class":"hero-gallery__tagline"},"styles":["10a1b9b"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Tagline"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Heading"},"tag":"h2","attributes":{"class":"hero-gallery__heading"},"styles":["47510ce"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit amet "},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Description"},"tag":"p","attributes":{"class":"hero-gallery__description"},"styles":["e639ab1"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Gallery"},"tag":"ul","attributes":{"class":"hero-gallery__gallery"},"styles":["a727262"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Image item"},"tag":"li","attributes":{"class":"hero-gallery__gallery-item is-active"},"styles":["d683a09","8f2e6ac"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Image"},"tag":"figure","attributes":{"class":"hero-gallery__gallery-img"},"styles":["53ed805"]},"innerBlocks":[{"blockName":"etch/dynamic-image","attrs":{"metadata":{"name":"Image"},"tag":"img","attributes":{"src":"https://picsum.photos/seed/etch1/1280/720","alt":""}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Overlay (link)"},"tag":"a","attributes":{"class":"hero-gallery__gallery-overlay"},"styles":["0119e7e"]},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Container info"},"tag":"div","attributes":{"class":"hero-gallery__gallery-container-info"},"styles":["98fe4b3"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Heading"},"tag":"h3","attributes":{"class":"hero-gallery__gallery-heading"},"styles":["dc9258a"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Description"},"tag":"p","attributes":{"class":"hero-gallery__gallery-description"},"styles":["fa0fc53"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n","innerContent":["\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Image item"},"tag":"li","attributes":{"class":"hero-gallery__gallery-item"},"styles":["d683a09"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Image"},"tag":"figure","attributes":{"class":"hero-gallery__gallery-img"},"styles":["53ed805"]},"innerBlocks":[{"blockName":"etch/dynamic-image","attrs":{"metadata":{"name":"Image"},"tag":"img","attributes":{"src":"https://picsum.photos/seed/etch2/1280/720","alt":""}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Overlay (link)"},"tag":"a","attributes":{"class":"hero-gallery__gallery-overlay"},"styles":["0119e7e"]},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Container info"},"tag":"div","attributes":{"class":"hero-gallery__gallery-container-info"},"styles":["98fe4b3"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Heading"},"tag":"h3","attributes":{"class":"hero-gallery__gallery-heading"},"styles":["dc9258a"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Description"},"tag":"p","attributes":{"class":"hero-gallery__gallery-description"},"styles":["fa0fc53"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n","innerContent":["\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Image item"},"tag":"li","attributes":{"class":"hero-gallery__gallery-item"},"styles":["d683a09"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Image"},"tag":"figure","attributes":{"class":"hero-gallery__gallery-img"},"styles":["53ed805"]},"innerBlocks":[{"blockName":"etch/dynamic-image","attrs":{"metadata":{"name":"Image"},"tag":"img","attributes":{"src":"https://picsum.photos/seed/etch3/1280/720","alt":""}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Overlay (link)"},"tag":"a","attributes":{"class":"hero-gallery__gallery-overlay"},"styles":["0119e7e"]},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Container info"},"tag":"div","attributes":{"class":"hero-gallery__gallery-container-info"},"styles":["98fe4b3"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Heading"},"tag":"h3","attributes":{"class":"hero-gallery__gallery-heading"},"styles":["dc9258a"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Description"},"tag":"p","attributes":{"class":"hero-gallery__gallery-description"},"styles":["fa0fc53"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n","innerContent":["\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Image item"},"tag":"li","attributes":{"class":"hero-gallery__gallery-item"},"styles":["d683a09"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Image"},"tag":"figure","attributes":{"class":"hero-gallery__gallery-img"},"styles":["53ed805"]},"innerBlocks":[{"blockName":"etch/dynamic-image","attrs":{"metadata":{"name":"Image"},"tag":"img","attributes":{"src":"https://picsum.photos/seed/etch4/1280/720","alt":""}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Overlay (link)"},"tag":"a","attributes":{"class":"hero-gallery__gallery-overlay"},"styles":["0119e7e"]},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Container info"},"tag":"div","attributes":{"class":"hero-gallery__gallery-container-info"},"styles":["98fe4b3"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Heading"},"tag":"h3","attributes":{"class":"hero-gallery__gallery-heading"},"styles":["dc9258a"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Description"},"tag":"p","attributes":{"class":"hero-gallery__gallery-description"},"styles":["fa0fc53"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n","innerContent":["\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Image item"},"tag":"li","attributes":{"class":"hero-gallery__gallery-item"},"styles":["d683a09"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Image"},"tag":"figure","attributes":{"class":"hero-gallery__gallery-img"},"styles":["53ed805"]},"innerBlocks":[{"blockName":"etch/dynamic-image","attrs":{"metadata":{"name":"Image"},"tag":"img","attributes":{"src":"https://picsum.photos/seed/etch5/1280/720","alt":""}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Overlay (link)"},"tag":"a","attributes":{"class":"hero-gallery__gallery-overlay"},"styles":["0119e7e"]},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Container info"},"tag":"div","attributes":{"class":"hero-gallery__gallery-container-info"},"styles":["98fe4b3"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Heading"},"tag":"h3","attributes":{"class":"hero-gallery__gallery-heading"},"styles":["dc9258a"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Description"},"tag":"p","attributes":{"class":"hero-gallery__gallery-description"},"styles":["fa0fc53"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"content":"Lorem ipsum dolor sit"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n","innerContent":["\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n\n","innerContent":["\n",null,"\n",null,"\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"JS & CSS Styles"},"tag":"div","attributes":[],"styles":[],"script":{"code":"ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignRE9NQ29udGVudExvYWRlZCcsICgpID0+IHsKICAvLyBHZXQgYWxsIGdhbGxlcnkgd2lkZ2V0cyBvbiB0aGUgcGFnZQogIGNvbnN0IGdhbGxlcmllcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy5oZXJvLWdhbGxlcnlfX2dhbGxlcnknKTsKCiAgLy8gU3RvcCB0aGUgc2NyaXB0IGlmIG5vIGdhbGxlcmllcyB3ZXJlIGZvdW5kCiAgaWYgKCFnYWxsZXJpZXMubGVuZ3RoKSByZXR1cm47CgogIGdhbGxlcmllcy5mb3JFYWNoKChnYWxsZXJ5KSA9PiB7CiAgICAvLyBHZXQgYWxsIGdhbGxlcnkgaXRlbXMgaW5zaWRlIHRoZSBjdXJyZW50IHdpZGdldAogICAgY29uc3QgZ2FsbGVyeUl0ZW1zID0gZ2FsbGVyeS5xdWVyeVNlbGVjdG9yQWxsKCcuaGVyby1nYWxsZXJ5X19nYWxsZXJ5LWl0ZW0nKTsKCiAgICAvLyBTdG9wIHRoaXMgaXRlcmF0aW9uIGlmIG5vIGl0ZW1zIHdlcmUgZm91bmQKICAgIGlmICghZ2FsbGVyeUl0ZW1zLmxlbmd0aCkgcmV0dXJuOwoKICAgIC8vIEZ1bmN0aW9uIHRvIGFjdGl2YXRlIHRoZSBzZWxlY3RlZCBnYWxsZXJ5IGl0ZW0KICAgIGNvbnN0IGFjdGl2YXRlSXRlbSA9IChzZWxlY3RlZEl0ZW0pID0+IHsKICAgICAgZ2FsbGVyeUl0ZW1zLmZvckVhY2goKGl0ZW0pID0+IHsKICAgICAgICBpdGVtLmNsYXNzTGlzdC5yZW1vdmUoJ2lzLWFjdGl2ZScpOwogICAgICB9KTsKCiAgICAgIHNlbGVjdGVkSXRlbS5jbGFzc0xpc3QuYWRkKCdpcy1hY3RpdmUnKTsKICAgIH07CgogICAgZ2FsbGVyeUl0ZW1zLmZvckVhY2goKGl0ZW0pID0+IHsKICAgICAgLy8gQ2hlY2sgaWYgdGhlIGl0ZW0gYWxyZWFkeSBjb250YWlucyBhIGZvY3VzYWJsZSBlbGVtZW50CiAgICAgIGNvbnN0IGZvY3VzYWJsZUVsZW1lbnQgPSBpdGVtLnF1ZXJ5U2VsZWN0b3IoCiAgICAgICAgJ2EsIGJ1dHRvbiwgaW5wdXQsIHRleHRhcmVhLCBzZWxlY3QsIFt0YWJpbmRleF06bm90KFt0YWJpbmRleD0iLTEiXSknCiAgICAgICk7CgogICAgICAvLyBPbmx5IG1ha2UgdGhlIHdob2xlIGNhcmQgZm9jdXNhYmxlIGlmIGl0IGhhcyBubyBmb2N1c2FibGUgY2hpbGRyZW4KICAgICAgaWYgKCFmb2N1c2FibGVFbGVtZW50KSB7CiAgICAgICAgaXRlbS5zZXRBdHRyaWJ1dGUoJ3RhYmluZGV4JywgJzAnKTsKCiAgICAgICAgaXRlbS5hZGRFdmVudExpc3RlbmVyKCdmb2N1cycsICgpID0+IHsKICAgICAgICAgIGFjdGl2YXRlSXRlbShpdGVtKTsKICAgICAgICB9KTsKICAgICAgfQoKICAgICAgLy8gQWN0aXZhdGUgdGhlIGl0ZW0gb24gaG92ZXIKICAgICAgaXRlbS5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWVudGVyJywgKCkgPT4gewogICAgICAgIGFjdGl2YXRlSXRlbShpdGVtKTsKICAgICAgfSk7CgogICAgICAvLyBBY3RpdmF0ZSB0aGUgaXRlbSB3aGVuIGFueSBpbnRlcm5hbCBmb2N1c2FibGUgZWxlbWVudCByZWNlaXZlcyBmb2N1cwogICAgICBpdGVtLmFkZEV2ZW50TGlzdGVuZXIoJ2ZvY3VzaW4nLCAoKSA9PiB7CiAgICAgICAgYWN0aXZhdGVJdGVtKGl0ZW0pOwogICAgICB9KTsKICAgIH0pOwogIH0pOwp9KTs="}},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]},{"blockName":"etch/raw-html","attrs":{"content":"<style>/* — The root styles must go in the element of the structure with the name \"Gallery\". –*/ \n\n.hero-gallery{\n /* Animation duration variables for image cards and content */\n\t–hero-gallery-item-duration: 0.5s;\n –hero-gallery-content-duration: 0.35s;\n \n /* Gallery items styles */\n .hero-gallery__gallery-item{\n flex: 0.7;\n \n /* Styles when focusing on or hovering over images */\n &.is-active{\n flex: 4.5;\n \n /* Info container styles to display with a specific delay */\n .hero-gallery__gallery-container-info{\n transform: translateY(0);\n opacity: 1;\n transition-delay: var(–hero-gallery-item-duration),\n var(–hero-gallery-item-duration), 0s;\n }\n \n .hero-gallery__gallery-overlay{\n opacity: 1;\n }\n }\n }\n}</style>","unsafe":false,"metadata":{"name":"JS & CSS Styles (CSS)"}},"innerBlocks":[],"innerHTML":"\n","innerContent":["\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n",null,"\n",null,"\n"]},"version":2.1,"timestamp":"2026-05-15T22:52:14.000Z","styles":{"etch-section-style":{"type":"element","selector":":where([data-etch-element=\"section\"])","collection":"default","css":"inline-size: 100%; display: flex; flex-direction: column; align-items: center;","readonly":true},"etch-container-style":{"type":"element","selector":":where([data-etch-element=\"container\"])","collection":"default","css":"inline-size: 100%; display: flex; flex-direction: column; max-width: var(–content-width, 1366px); align-self: center;","readonly":true},"0":{"type":"class","selector":".hero-gallery","collection":"default","css":"background-color: var(–white);","readonly":false},"f576802":{"type":"class","selector":".hero-gallery__container","collection":"default","css":"display: flex; flex-direction: column; align-items: center; row-gap: var(–container-gap);","readonly":false},"a727262":{"type":"class","selector":".hero-gallery__gallery","collection":"default","css":"display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: var(–space-xs); margin-block: 0; padding-inline: 0; inline-size: 100%;","readonly":false},"d683a09":{"type":"class","selector":".hero-gallery__gallery-item","collection":"default","css":"overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; block-size: 36rem; border-radius: var(–radius-m); position: relative; transition: all var(–hero-gallery-item-duration) ease; isolation: isolate; inline-size: 100%;","readonly":false},"8f2e6ac":{"type":"class","selector":".is-active","collection":"default","css":"","readonly":false},"53ed805":{"type":"class","selector":".hero-gallery__gallery-img","collection":"default","css":"z-index: -1; inline-size: 100%; block-size: 100%; position: absolute; inset-block-start: 0; inset-inline-end: 0; object-fit: cover; object-position: 50%;","readonly":false},"7a796d5":{"type":"class","selector":".hero-gallery__container-info","collection":"default","css":"display: flex; flex-direction: column; justify-content: flex-start; align-items: center; row-gap: var(–space-xs); inline-size: var(–width-80);","readonly":false},"10a1b9b":{"type":"class","selector":".hero-gallery__tagline","collection":"default","css":"font-weight: 600; text-align: center; color: var(–neutral); margin-block-end: 0;","readonly":false},"47510ce":{"type":"class","selector":".hero-gallery__heading","collection":"default","css":"font-size: var(–text-xxl); text-align: center;","readonly":false},"e639ab1":{"type":"class","selector":".hero-gallery__description","collection":"default","css":"inline-size: var(–width-50); text-align: center;","readonly":false},"0119e7e":{"type":"class","selector":".hero-gallery__gallery-overlay","collection":"default","css":"opacity: 0; z-index: -1; inline-size: 100%; block-size: 100%; background-image: linear-gradient(transparent, color-mix(in oklch, var(–black) 40%, transparent)); position: absolute; inset-block-start: 0; inset-inline-end: 0; transition: opacity var(–hero-gallery-content-duration) ease;","readonly":false},"98fe4b3":{"type":"class","selector":".hero-gallery__gallery-container-info","collection":"default","css":"opacity: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; row-gap: calc(var(–space-xs) / 2); min-inline-size: 169px; padding-block-end: var(–space-m); padding-inline: var(–space-m); position: absolute; inset-block-end: 0; inset-inline-start: 0; transform: translateY(5rem); transition: opacity var(–hero-gallery-content-duration) ease, transform var(–hero-gallery-content-duration) ease;; pointer-events: none;","readonly":false},"dc9258a":{"type":"class","selector":".hero-gallery__gallery-heading","collection":"default","css":"font-size: var(–text-l); color: var(–white);","readonly":false},"fa0fc53":{"type":"class","selector":".hero-gallery__gallery-description","collection":"default","css":"color: color-mix(in oklch, var(–white) 90%, transparent);","readonly":false}},"components":[]}