Styling for blockquotes, pull-quotes and any other types of quote
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

o-quote Build Status MIT licensed

Styling for quotes - block, pull or otherwise.


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

<blockquote class="o-quote o-quote--standard">
			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.
	<cite class="o-quote__cite"><span class="o-quote__author">Henry Mance</span><span class="o-quote__source">Financial Times</span></cite>


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">
.article-container blockquote {
	@include oQuoteStandard;

	cite {
		@include oQuoteStandardCite;

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

  • V2 brings in the new majors of o-colors and o-typography and introduces a new dependency on o-icons. Some of these components may result in bower conflicts if you're using other Origami components which require different versions. The solution to this is to update your other dependencies.
  • V2 deletes the extends that were deprecated in v1. If you were using the extends, then you should update your code to the mixins.


This software is published under the MIT licence.