Quote

...

Browser support

...

Parameters

The CSS component uses the <blockquote> tag with the z-quote HTML custom attribute.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-quote	string	Custom attribute for the quote component
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

INFO

Check the z-quote anatomy to know the specifications for this component. Use the Playground to see how you can customize this component.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Quote.css" />

Code

<blockquote z-quote>
  <p>Lorem ipsum dolor sit amet. Quo rerum dolorem ut velit exercitationem id aperiam omnis vel</p>
  <footer>
    <header>John Doe</header>
    <p>Description</p>
  </footer>
  <img src="../sample.png" alt="Quote image" />
</blockquote>