Origami Frontend Components & Services

Readme: o-quote

Styling for quotes

Usage

Check out how to include Origami components in your project to get started with o-quote.

Markup

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>

Sass

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 master 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 master brand users. For a full list of o-quote mixins see o-quote SassDoc in the registry.

Migration Guide

State Major Version Last Minor Release Migration guide
✨ active 5 N/A migrate to v5
⚠ maintained 4 4.1 migrate to v4
╳ broken 3 3.0 migrate to v3
╳ deprecated 2 2.2 migrate to v2
╳ deprecated 1 1.3 N/A

Contact

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.

Licence

This software is published under the MIT licence.

Status
active
Switch component view

GitHub Repository

Install o-quote

If using the Build Service, add o-quote@^5.0.1 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-quote@^5.0.1".

Help & Support

o-quote is maintained directly by the Origami team. If you have any questions about o-quote or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com