Quote - CSS Component ​

...

Browser support ​

Construction ​

The CSS component uses the <blockquote> tag with the z-quote HTML custom attribute. The main content has three parts:

The quote is represented with and initial <p> tag with the actual code.

To be or not to be

The quoter info ​

Uses a <footer> tag and includes two elements:

  • Author name: that uses a <header>.
  • A descriptor: (optional) that uses a <p>

To be or not to be

Prince Hamlet

Flesh and bone Simba

Image ​

Using an <img>at the end of the <blockquote>.

To be or not to be

Quote image

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
html
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Quote.css" />
Code
html
<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>