Commentary
The blockquote component is a simple container that conforms to web accessibility best practice (see Mozilla). It's layout is in a classic format that is common for content pages. It includes top and bottom margins to fit into the text flow.
Usage
Classes: | |
---|---|
.blockquote |
Defines typically a figure HTML tag as container. |
Dependencies: | |
---|---|
File: | blockquote.css |
Variables: | --element-background, --family-serif, --line-height-125, --line-height-150, --margin-form, --pad-horz, --pad-vert, --secondary, --size-5, --text-darker, --weight-medium |
Examples
Profit is not the purpose of a business, but rather the test of its validity. The purpose of a business is to create and keep a customer.
<figure class="blockquote">
<blockquote cite="https://www.goodreads.com/quotes/search?utf8=%E2%9C%93&q=peter+drucker+purpose&commit=Search">
<p>Profit is not the purpose of a business, but rather the test of its validity.
The purpose of a business is to create and keep a customer. </p>
</blockquote>
<figcaption>
<a href="https://en.wikipedia.org/wiki/Peter_Drucker" target="_blank">Peter Drucker</a>,
<cite>Innovation and Entrepreneurship</cite>
</figcaption>
</figure>