Skip to content Floating banner headerFloating banner content CSS Components Web Components
Floating banner headerFloating banner content
Floating banner
A Floating Banner presents users with relevant, short information and one or two CTAs related to the message. A banners is persistent on the screen, therefore users can either ignore it or interact with it - by dismissing it or by selecting a CTA. Banners can be displayed either at the top or at the bottom of the screen.
Implementations
The component FloatingBanner
is available in the following technologies:
Parameters
Parameters
Parameters are the attributes that can be used to customize the component when using it in a project. They apply to the WebComponents implementation and wrappers and to the Vue and React CSS implementations. Some parameters names change between the implementations, in order to follow the conventions of each technology and framework.
For example, the param model
is named ngModel
in Angular, modelValue
in Vue, but stays as model
in React.
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom params or properties:
Name | Type | Slottable | Description |
---|---|---|---|
header | string | ✅ | Header of the banner |
config | string | Configuration of the banner | |
accept-button-text | string | ✅ | Text of the accept button |
reject-button-text | string | ✅ | Text of the reject button |
custom | object | A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: html
| |
custom-str | string | The stringified version of the Example: html
| |
z-theme | string | Sets the theme of the component. The possible values are html
|
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
CSS Variable | Type | Description |
---|---|---|
--z-floating-banner--top | distance | Top distance of the banner |
--z-floating-banner--bg | color | Background color of the banner |
--z-floating-banner--color | color | Text color of the banner |
Both the background and text color of the floating banner
can be customized using the --z-floating-banner--bg
and --z-floating-banner--color
custom tokens.
Also you can customize the top position of the banner using the --z-floating-banner--top
custom token.
Accessibility
...