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