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 |
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.
narrow
The narrow modifier will reduce the width of the promo component.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/promo.js"></script>Code
html
<z-promo header="Promotional header" image-src="../sample.png" button-text="Go to Promotion"
category="One time offer">
Promotional content
</z-promo>