Quote - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-quote> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
content | string | The quote content |
quote-src | string | The source of the quote |
author-name | string | The name of the author |
description | string | The description of the quote |
image-src | string | The image source of the quote |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | |
author-name | span |
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.
description
The description attribute is used to set the description of the quote.
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.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/quote.js"></script>Code
html
<z-quote author-name="John Doe" description="Description" image-src="../sample.webp">
Lorem ipsum dolor sit amet. Quo rerum dolorem ut velit exercitationem id aperiam omnis vel
</z-quote>