Back
Banner 16
Copy component
Copy component
Basic banner component featuring text with button and close option.
Home
Components
Components
Banner
Banner 16
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"efb2f2b8-febb-1199-43b5-34497501255c","type":"Block","tag":"div","classes":["abe2e5df-793e-9e4b-ebc0-1f905d197c33"],"children":["dfce1f48-fd25-a31a-f16a-4ba87e6dff65","68e37a17-fa79-b7f4-87ab-d5fdd3121942","d8164360-62ad-17f4-7bee-7720f8fdf564"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"dfce1f48-fd25-a31a-f16a-4ba87e6dff65","type":"Block","tag":"div","classes":["abe2e5df-793e-9e4b-ebc0-1f905d197c34"],"children":["6d941ff3-a7b4-825a-095f-5a4764de39c4"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6d941ff3-a7b4-825a-095f-5a4764de39c4","text":true,"v":"Product launching soon!"},{"_id":"68e37a17-fa79-b7f4-87ab-d5fdd3121942","type":"Link","tag":"a","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d9"],"children":["58a7ad46-a849-1b5c-bb80-bc52f3a08213"],"data":{"button":true,"block":"","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]}}},{"_id":"58a7ad46-a849-1b5c-bb80-bc52f3a08213","text":true,"v":"Learn more"},{"_id":"d8164360-62ad-17f4-7bee-7720f8fdf564","type":"Link","tag":"a","classes":["abe2e5df-793e-9e4b-ebc0-1f905d197c36"],"children":["a5a3278a-74a4-52d4-03c0-4cf57fafceb0"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a5a3278a-74a4-52d4-03c0-4cf57fafceb0","type":"HtmlEmbed","tag":"div","classes":["abe2e5df-793e-9e4b-ebc0-1f905d197c37"],"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":[]}}}],"styles":[{"_id":"abe2e5df-793e-9e4b-ebc0-1f905d197c33","fake":false,"type":"class","name":"banner-16","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; flex-direction: row; justify-content: center; flex-wrap: nowrap; align-items: center; grid-column-gap: 1rem; grid-row-gap: 1rem; background-color: #e3eaf4;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem; text-align: center;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"abe2e5df-793e-9e4b-ebc0-1f905d197c34","fake":false,"type":"class","name":"banner-16_text","namespace":"","comb":"","styleLess":"font-weight: 700;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"27e2c28d-84e7-9136-e293-5ae1ccc4f8d9","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"display: inline-block; padding-top: 1rem; padding-right: 1.5rem; padding-bottom: 1rem; padding-left: 1.5rem; border-top-style: solid; border-top-width: 2px; border-top-color: #0c60f5; border-right-style: solid; border-right-width: 2px; border-right-color: #0c60f5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0c60f5; border-left-style: solid; border-left-width: 2px; border-left-color: #0c60f5; background-color: #0c60f5; color: white; font-size: 1em; line-height: 1.125em; font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap;","variants":{"main_hover":{"styleLess":"border-top-color: #0049ca; border-right-color: #0049ca; border-bottom-color: #0049ca; border-left-color: #0049ca; background-color: #0049ca;"}},"children":["27e2c28d-84e7-9136-e293-5ae1ccc4f8de","a6b7c620-6703-68cb-4e59-d2b3a9d1ab04","5eb34a0d-1d4c-bc49-56cf-7af9cc5e2dcf","3b4f261d-5209-659d-b43e-d49e7abe6e82"],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"abe2e5df-793e-9e4b-ebc0-1f905d197c36","fake":false,"type":"class","name":"banner-16_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":"abe2e5df-793e-9e4b-ebc0-1f905d197c37","fake":false,"type":"class","name":"banner-16_icon","namespace":"","comb":"","styleLess":"width: 1.25rem; height: 1.25rem; color: #3b4961;","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