Quote - Web Component โ
The Quote component can be used imported from:
Playground โ
Parameters โ
The Web component uses the <z-quote>
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 |
---|---|---|---|---|
content | string | The quote content | default | |
quote-src | string | The source of the quote | ||
author-name | string | The name of the author | author-name | |
description | string | The description of the quote | description | |
image-src | string | The image source of the quote |
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 | The quote content |
author-name | span | The name of the author |
description | span | The description of the quote |
Parameters use โ
content
โ
The content
attribute is inject the main quote or using the default
slot:
quote-src
โ
The quote-src
attribute is used to set the source of the quote.
author-name
โ
The author-name
attribute is used to set the name of the author.
Or using the author-name
slot:
description
โ
The description
attribute is used to set the description of the quote or using the description
slot:
Image โ
image-src
โ
The image-src
attribute is used to set the image of the author.
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.
You can customize the quote component using the --z-quote--bg and --z-quote--color CSS variables to change the background and text color, respectively.
Browser support โ
Detected engine: ย
Chromium
Webkit
Gecko