Back
Banner 15
Copy component
Copy component
Basic banner component featuring text with button.
Home
Components
Components
Banner
Banner 15
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"34a04782-2104-6352-2d28-35e558346467","type":"Block","tag":"div","classes":["3f1639b5-d0b3-e167-b71e-6e00d5b8cd8f"],"children":["4fcaea7e-f18d-8511-1054-66fcb9b2a55a","1bb6af8b-6a20-ea0f-d1da-91ed017bea77"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4fcaea7e-f18d-8511-1054-66fcb9b2a55a","type":"Block","tag":"div","classes":["3f1639b5-d0b3-e167-b71e-6e00d5b8cd96"],"children":["78a0f3e5-7289-4536-deb9-51c50f200b75"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"78a0f3e5-7289-4536-deb9-51c50f200b75","text":true,"v":"Product launching soon!"},{"_id":"1bb6af8b-6a20-ea0f-d1da-91ed017bea77","type":"Link","tag":"a","classes":["27e2c28d-84e7-9136-e293-5ae1ccc4f8d9"],"children":["fdefbdc5-0f1a-14a5-40a1-2b64a4133100"],"data":{"button":true,"block":"","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":true},"visibility":{"conditions":[]}}},{"_id":"fdefbdc5-0f1a-14a5-40a1-2b64a4133100","text":true,"v":"Learn more"}],"styles":[{"_id":"3f1639b5-d0b3-e167-b71e-6e00d5b8cd8f","fake":false,"type":"class","name":"banner-15","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":"3f1639b5-d0b3-e167-b71e-6e00d5b8cd96","fake":false,"type":"class","name":"banner-15_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}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from