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

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

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" closeable>
  <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" closeable 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" closeable 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'

Slots

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

Attributes

Property	Type	Default	Description
`variant`	`BannerVariant`	`'brand'`	The type of the banner.
`closeable`	`boolean`		Whether the banner is closeable.
`opened`	`string`	`'true'`	State of the banner. If false banner is hidden.
`closeButtonAriaLabel`	`string`		The aria-label for the close button.
`closeButtonLabel`	`string`	`'close'`
`icon`	`string`

Events

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

CSS Parts

Part Name	Description
`base`	The main banner 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.
`actions`	The actions of the banner.
`title`	The title of the banner.