The Banner Component

Description

How to use the banner component?

This documentation explains how to set up a banner variant at your page.

Dependencies

To use this banner you have to make sure that your page is loading the cotton-ball library and ui-elements.

<script src="https://api.tui.com/ml/cotton-ball/"></script>

<script type="module" src="https://cloud.tui.com/ui/ui-elements/ui-elements/ui-elements.esm.js" async></script>
<script nomodule src="https://cloud.tui.com/ui/ui-elements/ui-elements/ui-elements.js" async></script>
<link rel="stylesheet" href="https://cloud.tui.com/ui/ui-elements/ui-elements/ui-elements.css">

Configuration

<tui-banner 
  class="tui-component tui-component-banner" 
  id="tui-campaign-banner-seo" 
  data-stencil="true" 
  variant="flex" 
  text="<strong>Nur bis 2.12.</strong> den nächsten <strong>Sommerurlaub</strong> mit der Familie buchen und sparen!" 
  headline="KINDER REISEN AB 99 €!" 
  button-text="JETZT ENTDECKEN" 
  background="https://www.tui.com/fileadmin/tui/pics/kfp/KFP-Campaign-Visual.jpg" 
  icon="https://www.tui.com/fileadmin/tui/pics/kfp/KFP-Icon.png">
</tui-banner>

See the Attributes section for configuration details.

Handle Click

The banner provides a call-to-action-event.

addEventListener('ctaClick', () => {...});

Screenshots

This is the default variant

This is the icon variant

Meta

Maintainer	berlin-team-futurama@lists.tui.de
Locales	de-DE, de-AT, de-CH, fr-CH

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://cloud.tui.com/cdn/banner/current/banner.js" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<tui-banner
	headline="VALUE"
	button-text="VALUE">
</tui-banner>

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
id	The unique id of a banner.			no
variant	The variant of a banner.			no
headline	The title of a banner.			yes
text	The main information text. It is possible to use HTML-flags in that text.			no
icon	The icon to show or nothing if the icon shall be omitted.			no
background	To configure the banner background or nothing if the blue default background shall be shown.			no
button-text	The call to actions text.			yes
info-text	A small text below the button. This can be used as a pressure point text or additional info.			no