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.

Dependencies

This component automatically imports the following dependencies.

  • <sl-button>
  • <sl-divider>
  • <sl-icon>
  • <sl-spinner>
  • <sl-standard-image>