Origami Frontend Components & Services

Readme: o-quote

Styling for quotes

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 is only available to master brand users.

-<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 '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 4 N/A migrate to v4
╳ broken 3 3.0 migrate to v3
⚠ maintained 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.

Support Status
active
Switch component view

GitHub Repository

Install o-quote

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

If running a Manual Build, run bower install --save "o-quote@^4.1.4".

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