DÁP Design System - Banner webcomponent

Banner

Banners are used to display important information to users. They can be used to inform users about new features, changes, or updates.

Design system docs

Examples

Default banner

<dap-ds-banner>
Már letölthető az alkalmazás legújabb verziója!
</dap-ds-banner>

Variants

Banners can have different variants to indicate the importance of the message.

<dap-ds-stack>
<dap-ds-banner variant="info">
  INFO Már letölthető az alkalmazás legújabb verziója!
</dap-ds-banner>
<dap-ds-banner variant="positive">
  POSITIVE Már letölthető az alkalmazás legújabb verziója!
</dap-ds-banner>
<dap-ds-banner variant="warning">
  WARNING Már letölthető az alkalmazás legújabb verziója!
</dap-ds-banner>
<dap-ds-banner variant="negative">
  NEGATIVE Már letölthető az alkalmazás legújabb verziója!
</dap-ds-banner>
<dap-ds-banner variant="brand">
  BRAND Már letölthető az alkalmazás legújabb verziója!
</dap-ds-banner>
</dap-ds-stack>

Closeable banner

Banners can be closeable by adding the closeable attribute. You can listen to the dds-close event to handle the close action.

HTML

INFO Már letölthető az alkalmazás legújabb verziója!

document.querySelector('dap-ds-banner').addEventListener('dds-close', () => {
  item.setAttribute('opened', 'false')
  console.log('Banner closed');
});

Banner with action

You can add actions to the banner by adding a dap-ds-link or any other element to the actions slot.

<dap-ds-banner variant="info">
<span slot="title">Title</span>
<span>
  Brand content. Lorem ipsum dolor sit amet, consectetur adipiscing
  elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te
  dicta? Duo Reges: constructio interrete.
</span>
<dap-ds-link slot="actions" variant="inverted" href="#">Action 1</dap-ds-link>
<dap-ds-link variant="inverted" slot="actions" href="#">Action 2</dap-ds-link>
</dap-ds-banner>

Custom icon

You can add a custom icon to the banner by adding an element to the icon slot or you can use the icon attribute to add an icon from the icon library.

<dap-ds-stack>
<dap-ds-banner variant="info" icon="arrow-down-line">
  <span slot="title">Title</span>
  <span>Icon from built in icons</span>
  <dap-ds-link slot="actions" variant="inverted" href="#">Action 1</dap-ds-link>
  <dap-ds-link variant="inverted" slot="actions" href="#">Action 2</dap-ds-link>
</dap-ds-banner>

<dap-ds-banner variant="info" icon="cookie-line">
  <span slot="title">Title</span>
  <dap-ds-icon slot="icon" name="cookie-line"></dap-ds-icon>
  <span>Custom dap-ds-icon</span>
  <dap-ds-link slot="actions" variant="inverted" href="#">Action 1</dap-ds-link>
  <dap-ds-link variant="inverted" slot="actions" href="#">Action 2</dap-ds-link>
</dap-ds-banner>
</dap-ds-stack>

Importing

import { DapDSBanner } from 'dap-design-system/dist/dds'

Importing React

import { DapDSBannerReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`variant`	`'brand'`, `'positive'` , `'info'` , `'warning'` , `'negative'`	`'brand'`	The variant of the banner
`closeable`	`boolean`		Whether the banner is closeable
`opened`	`string`	`'true'`	State of the banner. If false banner is hidden
`closeButtonLabel`	`string`	`'close'`	The aria-label for the close button
`icon`	`string`		The icon of the banner, this is a name of a built icon icon

Slots

Name	Description
`(default)`	The content of the banner.
`actions`	Actions of banner
`icon`	The icon of the banner.

Events

Event Name	Description
`dds-close`	Event fired when the banner is closed.

CSS Parts

Part Name	Description
`base`	The main banner container.
`card-base`	The wrapper card container.
`icon`	The icon of the banner.
`icon-element`	The icon element of the banner.
`icon-base`	The base of the icon.
`closebutton`	The close button of the banner.
`close-icon-element`	The icon element of the close button.
`close-icon-base`	The base of the close button icon.
`actions`	The actions of the banner.
`title`	The title of the banner.

CSS Custom Properties

Property Name	Description
`--dds-banner-gap`	The gap between banner elements. Default is the design system's spacing-200.
`--dds-banner-line-height`	The line height of the banner text. Default is the design system's font-line-height-xlarge.
`--dds-banner-transition`	The transition property for the banner. Default is 'all 0.2s ease-in-out'.
`--dds-banner-brand-background`	The background color of the brand banner. Default is the design system's banner-background-brand.
`--dds-banner-brand-icon-color`	The color of the brand banner icon. Default is the design system's banner-icon-brand.
`--dds-banner-brand-text-color`	The text color of the brand banner. Default is the design system's banner-text-brand.
`--dds-banner-brand-action-color`	The color of the brand banner actions. Default is the design system's banner-action-enabled.
`--dds-banner-info-background`	The background color of the info banner. Default is the design system's banner-background-informative.
`--dds-banner-info-icon-color`	The color of the info banner icon. Default is the design system's banner-icon-informative.
`--dds-banner-info-text-color`	The text color of the info banner. Default is the design system's banner-text-informative.
`--dds-banner-info-action-color`	The color of the info banner actions. Default is the design system's banner-action-enabled.
`--dds-banner-positive-background`	The background color of the positive banner. Default is the design system's banner-background-positive.
`--dds-banner-positive-icon-color`	The color of the positive banner icon. Default is the design system's banner-icon-positive.
`--dds-banner-positive-text-color`	The text color of the positive banner. Default is the design system's banner-text-positive.
`--dds-banner-positive-action-color`	The color of the positive banner actions. Default is the design system's banner-action-enabled.
`--dds-banner-warning-background`	The background color of the warning banner. Default is the design system's banner-background-warning.
`--dds-banner-warning-icon-color`	The color of the warning banner icon. Default is the design system's banner-icon-warning.
`--dds-banner-warning-text-color`	The text color of the warning banner. Default is the design system's banner-text-warning.
`--dds-banner-warning-action-color`	The color of the warning banner actions. Default is the design system's banner-action-inverted-enabled.
`--dds-banner-negative-background`	The background color of the negative banner. Default is the design system's banner-background-negative.
`--dds-banner-negative-icon-color`	The color of the negative banner icon. Default is the design system's banner-icon-negative.
`--dds-banner-negative-text-color`	The text color of the negative banner. Default is the design system's banner-text-negative.
`--dds-banner-negative-action-color`	The color of the negative banner actions. Default is the design system's banner-action-inverted-enabled.