Quote - CSS Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Construction

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

z-quote

The z-quote attribute is used to style the quote component.

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

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.

To be or not to be

Prince Hamlet

Flesh and bone Simba

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.3/@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.webp" alt="Quote image" />
</blockquote>