Back
Banner 2
Copy component
Copy component
A simple banner with text field and a dismiss option on the right side.
Home
Components
Components
Banner
Banner 2
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"d06d11f2-feda-dc5e-a5a3-4ae7ddb80a09","type":"Block","tag":"div","classes":["4d93ca65-028f-cb88-69f2-adb0689824ce"],"children":["e0e763c7-0a43-6c49-62ca-482edd29a2fb","e323b032-1eb2-2f93-a48b-764e2adcf3d8"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e0e763c7-0a43-6c49-62ca-482edd29a2fb","type":"Block","tag":"div","classes":["4d93ca65-028f-cb88-69f2-adb0689824cf"],"children":["ee264953-c118-308a-7b9e-20f7636281c5"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ee264953-c118-308a-7b9e-20f7636281c5","text":true,"v":"This is a very simple banner with a text message to display."},{"_id":"e323b032-1eb2-2f93-a48b-764e2adcf3d8","type":"Link","tag":"a","classes":["2b1ef8ec-5701-1cbe-ec5d-3902ca95289d"],"children":["2426612b-1d1c-04f4-609c-9cc49ca7392e"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2426612b-1d1c-04f4-609c-9cc49ca7392e","type":"HtmlEmbed","tag":"div","classes":["1de85dbb-ab8d-3662-8c84-79c20ed02eb8"],"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":"4d93ca65-028f-cb88-69f2-adb0689824ce","fake":false,"type":"class","name":"banner-2","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; background-color: #e3eaf4;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"4d93ca65-028f-cb88-69f2-adb0689824cf","fake":false,"type":"class","name":"banner-2_text","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"2b1ef8ec-5701-1cbe-ec5d-3902ca95289d","fake":false,"type":"class","name":"banner-2_close","namespace":"","comb":"","styleLess":"position: absolute; right: 0.5rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"1de85dbb-ab8d-3662-8c84-79c20ed02eb8","fake":false,"type":"class","name":"banner-2_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