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
...
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