Banner 18

Banner component with a custom day countdown displaying how many days left until event. Also has option to close banner.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"9d0233f1-2a1f-5a43-9a07-c564e79cdd84","type":"Block","tag":"div","classes":["7a3dd0ff-7cca-b13e-68bc-72b55e30eaee"],"children":["8cb63e66-2a36-8ab3-916e-9c537d1b0655","fc4ad368-47d3-ab33-579e-c716c10d39dd","9a4917d3-1c50-8647-190c-6a5e24d2941b"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"8cb63e66-2a36-8ab3-916e-9c537d1b0655","type":"Block","tag":"div","classes":["7a3dd0ff-7cca-b13e-68bc-72b55e30eaef"],"children":["a865b44c-24ae-738d-01fd-a2f9c0b03438","7957b296-b0fd-b82a-87bd-c7ffa476c042","3488a901-2df7-d53a-8e5b-03c8f862d5fa","72cfa7c4-bc15-3eba-44d9-dbc407108149"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a865b44c-24ae-738d-01fd-a2f9c0b03438","type":"Block","tag":"div","classes":["7a3dd0ff-7cca-b13e-68bc-72b55e30eaf0"],"children":["2b3c05b3-e72b-b981-109f-05d838de5d81"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2b3c05b3-e72b-b981-109f-05d838de5d81","text":true,"v":"Only"},{"_id":"7957b296-b0fd-b82a-87bd-c7ffa476c042","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014f"],"children":["37ca9f88-a70b-79d1-c8c8-86cbc4d33a94"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"countdown-clock"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"37ca9f88-a70b-79d1-c8c8-86cbc4d33a94","type":"Block","tag":"div","classes":["6f56c71a-8dfc-3571-dd2d-9ec501ed014c"],"children":["170d4984-4c8f-6557-710c-98cbc47a4ebf"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":"days"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"170d4984-4c8f-6557-710c-98cbc47a4ebf","text":true,"v":"0"},{"_id":"3488a901-2df7-d53a-8e5b-03c8f862d5fa","type":"Block","tag":"div","classes":["9f95effd-da36-b3c7-c112-a242a0f98829"],"children":["41f2a75e-0a52-1a54-9c41-f9e696eb3b8d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"41f2a75e-0a52-1a54-9c41-f9e696eb3b8d","text":true,"v":"\"day\" or \"days\""},{"_id":"72cfa7c4-bc15-3eba-44d9-dbc407108149","type":"Block","tag":"div","classes":["7a3dd0ff-7cca-b13e-68bc-72b55e30eaf0"],"children":["583270c3-9cdf-c5de-f201-9532079164d5","c5e56539-9ac7-d148-d855-551c03e67d0c"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"583270c3-9cdf-c5de-f201-9532079164d5","text":true,"v":"left to save 50% off your next purchase! "},{"_id":"c5e56539-9ac7-d148-d855-551c03e67d0c","type":"Link","tag":"a","classes":[],"children":["ec466d43-8ea5-8b60-d4fb-5b5135b45626"],"data":{"button":false,"block":"","link":{"url":"#","mode":"external"},"attr":{"id":"","href":"#"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ec466d43-8ea5-8b60-d4fb-5b5135b45626","text":true,"v":"Shop now"},{"_id":"fc4ad368-47d3-ab33-579e-c716c10d39dd","type":"Link","tag":"a","classes":["4873de2e-b3a9-a552-3589-77c01bd17782"],"children":["795f3b1d-7e45-d062-ad47-7e53e3017ba5"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"795f3b1d-7e45-d062-ad47-7e53e3017ba5","type":"HtmlEmbed","tag":"div","classes":["4873de2e-b3a9-a552-3589-77c01bd17783"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.7729 8.28771C17.0658 7.99481 17.0658 7.51994 16.7729 7.22705C16.48 6.93415 16.0052 6.93415 15.7123 7.22705L16.7729 8.28771ZM7.22699 15.7123C6.9341 16.0052 6.9341 16.4801 7.22699 16.773C7.51989 17.0659 7.99476 17.0659 8.28765 16.773L7.22699 15.7123ZM15.7123 16.7729C16.0052 17.0658 16.48 17.0658 16.7729 16.7729C17.0658 16.48 17.0658 16.0052 16.7729 15.7123L15.7123 16.7729ZM8.28765 7.22699C7.99476 6.9341 7.51989 6.9341 7.22699 7.22699C6.9341 7.51989 6.9341 7.99476 7.22699 8.28765L8.28765 7.22699ZM15.7123 7.22705L7.22699 15.7123L8.28765 16.773L16.7729 8.28771L15.7123 7.22705ZM16.7729 15.7123L8.28765 7.22699L7.22699 8.28765L15.7123 16.7729L16.7729 15.7123Z\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.7729 8.28771C17.0658 7.99481 17.0658 7.51994 16.7729 7.22705C16.48 6.93415 16.0052 6.93415 15.7123 7.22705L16.7729 8.28771ZM7.22699 15.7123C6.9341 16.0052 6.9341 16.4801 7.22699 16.773C7.51989 17.0659 7.99476 17.0659 8.28765 16.773L7.22699 15.7123ZM15.7123 16.7729C16.0052 17.0658 16.48 17.0658 16.7729 16.7729C17.0658 16.48 17.0658 16.0052 16.7729 15.7123L15.7123 16.7729ZM8.28765 7.22699C7.99476 6.9341 7.51989 6.9341 7.22699 7.22699C6.9341 7.51989 6.9341 7.99476 7.22699 8.28765L8.28765 7.22699ZM15.7123 7.22705L7.22699 15.7123L8.28765 16.773L16.7729 8.28771L15.7123 7.22705ZM16.7729 15.7123L8.28765 7.22699L7.22699 8.28765L15.7123 16.7729L16.7729 15.7123Z\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"9a4917d3-1c50-8647-190c-6a5e24d2941b","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":"9f95effd-da36-b3c7-c112-a242a0f98829","fake":false,"type":"class","name":"days-left","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"4873de2e-b3a9-a552-3589-77c01bd17783","fake":false,"type":"class","name":"banner-18_icon","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; color: #3b4961;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"7a3dd0ff-7cca-b13e-68bc-72b55e30eaf0","fake":false,"type":"class","name":"banner-18_text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"4873de2e-b3a9-a552-3589-77c01bd17782","fake":false,"type":"class","name":"banner-18_close","namespace":"","comb":"","styleLess":"position: absolute; top: 0.5rem; right: 0.5rem;","variants":{"small":{"styleLess":"top: 0.5rem;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"7a3dd0ff-7cca-b13e-68bc-72b55e30eaee","fake":false,"type":"class","name":"banner-18","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":"6f56c71a-8dfc-3571-dd2d-9ec501ed014c","fake":false,"type":"class","name":"days","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"7a3dd0ff-7cca-b13e-68bc-72b55e30eaef","fake":false,"type":"class","name":"banner-18_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":"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":"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