Skip to content

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:

NameTypeDescriptionSlotA11y
contentstringThe quote contentdefault
quote-srcstringThe source of the quote
author-namestringThe name of the authorauthor-name
descriptionstringThe description of the quotedescription
image-srcstringThe image source of the quote

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanThe quote content
author-namespanThe name of the author
descriptionspanThe description of the quote

Parameters use

content

The content attribute is inject the main quote or using the default slot:

To be or not to be

quote-src

The quote-src attribute is used to set the source of the quote.

To be or not to be

author-name

The author-name attribute is used to set the name of the author.

To be or not to be

Or using the author-name slot:

Prince Hamlet To be or not to be

description

The description attribute is used to set the description of the quote or using the description slot:

To be or not to be The famous quote from Hamlet To be or not to be

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.

To be or not to be


it can also be customized via picture slot:

Miaow, miaow, miaow


Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example