Quote - CSS Component
Playground
Customization
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
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
Browser support
Detected engine:
Chromium
Webkit
Gecko