Origami Frontend Components & Services

Readme: o-quote


Styling for quotes - block, pull or otherwise.


Markup

Add an o-quote class to any quote you wish to apply the styles to.

<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>

Themeable

Either extend the base classes to create a custom theme or use the standard theme.

Silent mode (docs)

With $o-quote-is-silent is set to true, the module won't output any styles.
You can then use the mixins directly in your code:

<div class="article-container">
    <blockquote>
        <p>…</p>
        <cite>Anonymous</cite>
    </blockquote>
</div>
.article-container blockquote {
    @include oQuoteStandard;

    cite {
        @include oQuoteStandardCite;
    }
}

Migrating from v1.x.x to v2.x.x


Licence

This software is published under the MIT licence.

Switch component view

GitHub Repository

Install o-quote

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

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

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com