Back
Banner 4
Copy component
Copy component
Simple banner with a text and link field along with a close option on the right side.
Home
Components
Components
Banner
Banner 4
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"08210ed6-6961-7c3e-9d83-409e2a5d3758","type":"Block","tag":"div","classes":["c102c19e-2f0a-8a9f-4921-617621b231dc"],"children":["d9b30dae-3ce3-b382-b2c9-895ee185dbd5","e4a4b850-306a-6917-6d97-4d79a51dbe70","d587833c-2fda-c0a0-db61-bba55067a25b"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d9b30dae-3ce3-b382-b2c9-895ee185dbd5","type":"Block","tag":"div","classes":["c102c19e-2f0a-8a9f-4921-617621b231dd"],"children":["fb9d7d66-80a5-dc9d-da3e-7319fb8477cf"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"fb9d7d66-80a5-dc9d-da3e-7319fb8477cf","text":true,"v":"This is a very simple banner with a text message to display."},{"_id":"e4a4b850-306a-6917-6d97-4d79a51dbe70","type":"Link","tag":"a","classes":["c102c19e-2f0a-8a9f-4921-617621b231de"],"children":["ccc18030-786a-9f33-fc38-d1fb5c6a09ad"],"data":{"button":false,"block":"","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ccc18030-786a-9f33-fc38-d1fb5c6a09ad","text":true,"v":"Click here to learn more"},{"_id":"d587833c-2fda-c0a0-db61-bba55067a25b","type":"Link","tag":"a","classes":["c102c19e-2f0a-8a9f-4921-617621b231df"],"children":["628707bc-d7a4-01f6-d4ae-16050e50c5c8"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"628707bc-d7a4-01f6-d4ae-16050e50c5c8","type":"HtmlEmbed","tag":"div","classes":["c102c19e-2f0a-8a9f-4921-617621b231e0"],"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":"c102c19e-2f0a-8a9f-4921-617621b231dc","fake":false,"type":"class","name":"banner-4","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; padding-top: 0.75rem; padding-right: 2rem; padding-bottom: 0.75rem; padding-left: 2rem; justify-content: center; align-items: center; grid-column-gap: 0.25rem; grid-row-gap: 0.25rem; background-color: #e3eaf4;","variants":{"small":{"styleLess":"flex-direction: column; flex-wrap: nowrap; text-align: center;"}},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c102c19e-2f0a-8a9f-4921-617621b231dd","fake":false,"type":"class","name":"banner-4_text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c102c19e-2f0a-8a9f-4921-617621b231de","fake":false,"type":"class","name":"banner-4_link","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c102c19e-2f0a-8a9f-4921-617621b231df","fake":false,"type":"class","name":"banner-4_close","namespace":"","comb":"","styleLess":"position: absolute; right: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c102c19e-2f0a-8a9f-4921-617621b231e0","fake":false,"type":"class","name":"banner-4_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