Promo - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-promo> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
config (optional)	string	Configuration of the promo
header (optional)	string	Header of the promo
button-text (optional)	string	Text of the button
image-src	string	URL of the image
category (optional)	string	Category of the promo
content (optional)	string	Content of the promo

The available slots for the component are:

Name	Tags	Description
default	span
category	span
header	span
actions	span

header

The header attribute is the title of the promo component.

button-text

The button-text attribute is the text of the button.

image-src

The image-src attribute is the URL of the image.

You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.

category

The category attribute is the category of the promo component.

config

The config attribute has two modifiers.

left

The left modifier will align the content to the left.

Promotional content

narrow

The narrow modifier will reduce the width of the promo component.

Promotional content

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/promo.js"></script>

Code

<z-promo header="Promotional header" image-src="../sample.webp" button-text="Go to Promotion"
  category="One time offer">
  Promotional content
</z-promo>