Banners

The type, theme, and width pickers choose one of the 20 shipped compositions, and the layout picker previews the choice in a real 375px viewport, where the breakpoint styles actually flip. The snippet names the file it comes from and is identical in both layouts. What you copy is an import and a self-contained element; its only props are onDismiss and, on the text field, onSubmit.

Compositions, not configurable components: 5 banner types, each in a default and a brand theme, each as a floating contained card and a full-width bar, for 20 files with one export apiece. Each row below names the contained default; its siblings append Brand, DefaultFullWidth, and BrandFullWidth to the same name, in matching kebab-case modules, and all 4 render in the linked section. Every composition ships with sample content to replace.

One line of copy with an inline text link, and a dismiss control. On md and up the copy centers and truncates rather than wrapping, so the message must survive a single line.

A featured icon, a two-part message, and one action button, shipped as a secondary button so the banner does not compete with the page’s own primary action. The action is a Button with href, so it renders as a link.

A decision banner: Allow as a primary button beside Decline as a secondary one, with an inline policy link. The shipped copy is cookie consent, which is the shape of message this layout exists for.

Email capture in place: a required email input and a Subscribe submit inside a kit Form. The featured icon hides below md to make room for the field. The form submits through the banner’s onSubmit prop and nowhere without it; see the Code tab.

A promo message beside three countdown unit cards. The shipped values are static numerals, 8, 16, and 24; nothing ticks until you supply the timer state yourself.