Quote - CSS Component ​

The Quote component can be used imported from:

Playground ​

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

Image


Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​