Quote - CSS Component โ
Browser support โ
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
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@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>