Skip to content

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


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
Image

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example