Styling for quotes
Check out how to include Origami components in your project to get started with o-quote.
A block quote is a passage of text from another source, or a passage of text that’s been spoken by a person. Used to attribute another source of information, or to quote the spoken words of a person.
For a standard blockquote style use classes o-quote o-quote--standard and the following markup. We recommend the editorial style instead for editorial contexts such as within articles.
<blockquote class="o-quote o-quote--standard">
<p>
The prize for this century’s worst technology product probably belongs to Google Glass, a pair of spectacles with an inbuilt camera and a tiny lens on which you could browse the internet. Suddenly you could film everybody you met, or silently ignore them and read Wikipedia.
</p>
<cite class="o-quote__cite">
<span class="o-quote__author">Henry Mance</span>
<span class="o-quote__source">Financial Times</span>
</cite>
</blockquote>For an editorial style blockquote swap the o-quote--standard class for o-quote--editorial. The editorial variant inherits font size and colour to support multiple editorial contexts. For example at the time of writing live blogs and article pages have different font sizes on large viewports but both should share the editorial quote style. Therefore the editorial quote must be within an element that sets typography styles such as o-editorial-typography-body.
-<blockquote class="o-quote o-quote--standard">
+<blockquote class="o-quote o-quote--editorial">
<p>
The prize for this century’s worst technology product probably belongs to Google Glass, a pair of spectacles with an inbuilt camera and a tiny lens on which you could browse the internet. Suddenly you could film everybody you met, or silently ignore them and read Wikipedia.
</p>
<cite class="o-quote__cite">
<span class="o-quote__author">Henry Mance</span>
<span class="o-quote__source">Financial Times</span>
</cite>
</blockquote>To output all o-quote styles include the oQuote mixin.
@import '@financial-times/o-quote/main';
@include oQuote();Pass an options $opts map to include only the o-quote styles you need. For example o-quote has styles for standard and editorial blockquotes. To only include styles for the editorial blockquote:
@include oQuote($opts: (
'standard': false, // do not output .o-quote--standard variant styles
'editorial': true, // output .o-quote--editorial variant styles
'cite': true // output .o-quote__cite styles, to support citations
));The "editorial" option is only available to core brand users.
You may also use o-quote mixins with custom HTML markup. For example if your markup used my-blockquote as a classname. We do not recommend this approach unless you are unable to update your markup, as it may lead to unnecessary CSS output and more difficult migrations.
<blockquote class="my-blockquote">
<p>The quote.</p>
<cite class="my-blockquote__cite">
<span class="my-blockquote__author">Author</span>
<span class="my-blockquote__source">Source</span>
</cite>
</blockquote>.my-blockquote {
@include oQuoteEditorial();
}
.my-blockquote .my-blockquote__cite {
@include oQuoteEditorialCite();
}
.my-blockquote .my-blockquote__author {
@include oQuoteEditorialCiteAuthor();
}
.my-blockquote .my-blockquote__source {
@include oQuoteEditorialCiteSource();
}The oQuoteEditorial mixins shown here are only available to core brand users. For a full list of o-quote mixins see o-quote SassDoc in the registry.
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published under the MIT licence.