Blockquote
The blockquote reset provides styles to semantic HTML5 blockquotes.
Styles
The styles applied to blockquotes are versatile, allowing users to provide only paragraphs or paragraphs with semantic <footer> and <cite> elements. Either option will have consistent styling. The accent color used for the top/bottom borders and footer attributions are pulled from the global theme accent background color.
Simplified
Adding a .cwf-blockquote--simplified class to a blockquote, or when a blockquote is used within a card component's body, simplifies its styles to remove the top/bottom borders, reduce padding, and make the leading left double-quote to look like regular text.
Tips
- Do not add the closing right double-quote to the last text paragraph within a blockquote; This is automatically added as a pseudo-element via the styles.
- If only pargraphs are provided within a blockquote, the last paragraph will be styled as a footer citation.
- Changing the global theme accent background color will affect all blockquote left double-quote embellishments (except when simplified) and footer attributions.
Examples
Two paragraphs
I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.
Name attributed to quote
Credentials
Credentials
Three paragraphs
I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.
I am another paragraph in a blockquote.
Name attributed to quote
Credentials
Credentials
Semantic
I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.
I am another paragraph in a blockquote.
Simplified
I am a very interesting paragraph in a blockquote that needs extra attention drawn to it.
I am another paragraph in a blockquote.