Banner 17

Banner component with a custom day countdown displaying how many days left until event.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"b7c95268-7939-cab0-655a-9559c7357e84","type":"Block","tag":"div","classes":["e72ca900-fa5b-4f0e-ec2d-88b93aef3e5a"],"children":["eaf591cf-76c4-96c3-cbac-e91935e365c9","657f8f63-bf32-dc07-7a3f-c7bea8331027"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"eaf591cf-76c4-96c3-cbac-e91935e365c9","type":"Block","tag":"div","classes":["e72ca900-fa5b-4f0e-ec2d-88b93aef3e60"],"children":["cebf1d70-99b8-3aef-98f3-c57adab282e6","913468fe-6f84-8843-ae3f-fc0515f3c5ee","a6a72801-222b-f1fa-63af-d7d3dc1731f1","f4f33b88-1312-e81d-c848-e8875ed50346"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"cebf1d70-99b8-3aef-98f3-c57adab282e6","type":"Block","tag":"div","classes":["c23dbe1f-03fa-e055-6deb-b6224d1bc025"],"children":["74199740-5d30-ab68-d202-747fcff4642d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"74199740-5d30-ab68-d202-747fcff4642d","text":true,"v":"Only"},{"_id":"913468fe-6f84-8843-ae3f-fc0515f3c5ee","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014f"],"children":["91f130a2-aeb9-2fa1-4378-4b6d83e59430"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"countdown-clock"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"91f130a2-aeb9-2fa1-4378-4b6d83e59430","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014c"],"children":["9038a923-e284-5075-6dc8-1ec741e52ab3"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"days"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9038a923-e284-5075-6dc8-1ec741e52ab3","text":true,"v":"0"},{"_id":"a6a72801-222b-f1fa-63af-d7d3dc1731f1","type":"Block","tag":"div","classes":["9f95effd-da36-b3c7-c112-a242a0f98829"],"children":["46d7ff73-c735-3856-abb5-148e624ff057"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"46d7ff73-c735-3856-abb5-148e624ff057","text":true,"v":"\"day\" or \"days\""},{"_id":"f4f33b88-1312-e81d-c848-e8875ed50346","type":"Block","tag":"div","classes":["c23dbe1f-03fa-e055-6deb-b6224d1bc025"],"children":["d049b489-9b12-cca8-dfb8-325f1e3faa65","8d41b351-f53d-de57-9337-f4bca00c7df5"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d049b489-9b12-cca8-dfb8-325f1e3faa65","text":true,"v":"left to save 50% off your next purchase! "},{"_id":"8d41b351-f53d-de57-9337-f4bca00c7df5","type":"Link","tag":"a","classes":[],"children":["308d7b50-9ecd-ddcf-0882-c8b0792a0c0d"],"data":{"button":false,"block":"","link":{"url":"#","mode":"external"},"attr":{"id":"","href":"#"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"308d7b50-9ecd-ddcf-0882-c8b0792a0c0d","text":true,"v":"Shop now"},{"_id":"657f8f63-bf32-dc07-7a3f-c7bea8331027","type":"HtmlEmbed","tag":"div","classes":["b2482c02-6fc5-cbd9-621a-0de58097c5ca"],"children":[],"v":"<script>\n// Change this date to update when the countdown will be at zero\nconst eventendtime = 'December 24 2024 00:00:00 GMT-0400';\n\nfunction timeRemaining(endtime) {\n const total = Date.parse(endtime) - Date.parse(new Date());\n const days = Math.floor((total/1000/60/60/24));\n return {\n total, days\n };\n}\n\nfunction initializeClock(id, endtime) {\n const clock = document.getElementById(id);\n const daysElement = clock.querySelector('.days');\n function updateClock() {\n const t = timeRemaining(endtime);\n daysElement.innerHTML = t.days;\n if (t.days > 1) {\n \tdayText = \"days\";\n } else if (t.days === 1) {\n \tdayText = \"day\";\n } else {\n \tdayText = \"days\";\n }\n const daysLeft = document.querySelector('.days-left');\n daysLeft.textContent = `${dayText}`;\n if (t.total <= 0) {\n clearInterval(time_interval);\n }\n }\n updateClock();\n var time_interval = setInterval(updateClock,60000);\n}\n\ninitializeClock('countdown-clock', eventendtime);\n\n</script>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<script>\n// Change this date to update when the countdown will be at zero\nconst eventendtime = 'December 24 2024 00:00:00 GMT-0400';\n\nfunction timeRemaining(endtime) {\n const total = Date.parse(endtime) - Date.parse(new Date());\n const days = Math.floor((total/1000/60/60/24));\n return {\n total, days\n };\n}\n\nfunction initializeClock(id, endtime) {\n const clock = document.getElementById(id);\n const daysElement = clock.querySelector('.days');\n function updateClock() {\n const t = timeRemaining(endtime);\n daysElement.innerHTML = t.days;\n if (t.days > 1) {\n \tdayText = \"days\";\n } else if (t.days === 1) {\n \tdayText = \"day\";\n } else {\n \tdayText = \"days\";\n }\n const daysLeft = document.querySelector('.days-left');\n daysLeft.textContent = `${dayText}`;\n if (t.total <= 0) {\n clearInterval(time_interval);\n }\n }\n updateClock();\n var time_interval = setInterval(updateClock,60000);\n}\n\ninitializeClock('countdown-clock', eventendtime);\n\n</script>","div":false,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}}],"styles":[{"_id":"e72ca900-fa5b-4f0e-ec2d-88b93aef3e5a","fake":false,"type":"class","name":"banner-17","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center; grid-column-gap: 0rem; grid-row-gap: 0rem; background-color: #e3eaf4;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; text-align: center;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"e72ca900-fa5b-4f0e-ec2d-88b93aef3e60","fake":false,"type":"class","name":"banner-17_content","namespace":"","comb":"","styleLess":"display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; align-items: center; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem; font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c23dbe1f-03fa-e055-6deb-b6224d1bc025","fake":false,"type":"class","name":"banner-17_text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014f","fake":false,"type":"class","name":"countdown","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; grid-column-gap: 0.75em; grid-row-gap: 0.75em; color: #0f1929; font-size: 1.5rem; font-weight: 700;","variants":{"tiny":{"styleLess":"grid-column-gap: 0.25em;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"6f56c71a-8dfc-3571-dd2d-9ec501ed014c","fake":false,"type":"class","name":"days","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"9f95effd-da36-b3c7-c112-a242a0f98829","fake":false,"type":"class","name":"days-left","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"b2482c02-6fc5-cbd9-621a-0de58097c5ca","fake":false,"type":"class","name":"CODE: Days Left","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from
Piixel Media