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 [required] | string | URL of the image | ||
config | string | Configuration of the promo | ||
header | string | Header of the promo | header | |
button-text | string | Text of the button | ||
button-icon | string | Icon 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 โ
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
and button-icon
attributes can be used to the the basics of the action button.
We can alternatively use the actions
slot make more complex things:
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:
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