Skip to content 
Promo content
Promotional header
Content goes here Content goes here Action 1 Action 2
Category 1 Category 2
Promotional content
Promotional content
Promo - Web Component
The Promo component can be used imported from:
Playground
Parameters
The Web component uses the <z-promo> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
image-src | string | URL of the image | ||
image-alt | string | Alt text of the image | ||
config | string | Configuration of the promo | ||
header | string | Header of the promo | header | |
shape | string | Shape of the promo | ||
button-text | string | Text of the button | ||
button-icon | string | Icon of the button | ||
button-icon-right | boolean | Icon on the right of the button | ||
category | string | Category of the promo | category | |
content | string | Content of the promo | default |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | Content of the promo |
category | span | Category of the promo |
header | span | Header of the promo |
actions | span | Actions of the promo |
Parameters use
Image
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.
We can also use the image slot:
image-alt
The image-alt attribute is the alt text of the image.
content
The content attribute is inject the main quote or using the default slot:
header
The header attribute is the title of the promo component or using the header slot.
shape
The shape can de changed using the shape attribute:
Or using a slotted z-shape. No need to set the :flip, it's automatically handled.
Actions
The button-text, button-icon & button-icon-right attributes can be used to the the basics of the action button.
We can alternatively use the actions slot make more complex things:
category
The category attribute is the category of the promo component.
We can use the category slot to inject other kind of assets:
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.
Browser support
Detected engine:
Chromium
Webkit
Gecko