Banner

<sl-banner> | SlBanner
Since 2.0 hub24

Banner is a component that displays a banner with a graphic, content, and actions. 

<sl-banner></sl-banner>

Examples

With graphic 

<sl-banner graphic></sl-banner>

Listen to button click event 

<sl-banner id="click-button" graphic></sl-banner>

<script>
  (() => {
    const bannerEl = document.querySelector('#click-button');
    bannerEl.addEventListener('sl-click', () => alert('Banner button clicked'));
  })();
</script>

[component-metadata:sl-banner]

Events

Name React Event Description Event Detail
sl-click Emitted when the banner is clicked. CustomEvent

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.