Quote - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
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 |
|---|---|---|---|
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 |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | The quote content |
author-name | span | The name of the author |
description | span | The description of the quote |
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-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.