Quotations can be added to content in several ways, and each option has different semantics and style but ensure that the best possible markup is applied.

The system supports several types of quotations:

  1. Simple blockquotes with the Markdown > syntax.
  2. Inline with the q helper.
  3. Decorative pull quotes with the pq helper.
  4. Advanced blockquotes with citations using the bq helper.

Inline Quotes

<%= q "This is an inline quote", url: 'https://example.com' %>
Figure 1

The q helper provides a way to easily add inline quotations with a citation.

↩︎

Inline quotes provide the ability to include short quotations with a URL for the cite attribute. They can be created using the standard <q> element or the q helper. (Figure 1)

For example This is an inline quote generated by the helper, and this is an example created with standard HTML. Either option works, but using HTML directly is only supported so that any legacy content works nicely. Using the helper means that the generated markup can be extended and improved over time and all instances will receive the updated markup.

Simple Block Quotes

> This would generate a blockquote.
Figure 2

The > Markdown syntax is handy when more nuance is not needed.

↩︎

Block quotes are for quoting external sources and are treated like standard content and presented inline with the prose. They can be modified using the pull classes.

Use the > markdown syntax (Figure 2) to create a simple blockquote.

This is a block quote that talks about something interesting.

Advanced Block Quotes

With some blockquote‘s, you may want to include citation information, and the easiest way to do that is with the bq helper. (Figures 3 & 4)

<%= bq work: 'Title of Work', author: 'Author McAuthorface', date: '1911', url: 'https://example.com', caption: 'Originally from $cite documented by $author and published $date' do %> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<% end %>
Figure 3

The bq helper method supports richer citation information and displays it in a figcaption. element so it’s semantically related and visible. It will also use the optional URL in the blockquote‘s cite attribute.

↩︎
<figure class="pull pull-clean"> <blockquote cite="https://example.com"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea&nbsp;commodo&nbsp;consequat.</p></blockquote> <figcaption>Originally from <cite><a href="https://example.com">Title of Work</a></cite> documented by Author McAuthorface and published&nbsp;1911</figcaption></figure>
Figure 4

Advanced blockquotes render slightly more complex markup taking full advantage of bockquote semantics with the optional citation element.

↩︎

Ultimately, the blockquote will be displayed like this:11The markup is based on the example from the MDN documentation for the blockquote element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Originally from Title of Work documented by Author McAuthorface and published 1911

Caption & Citations

The blockquote’s caption uses a default template to automatically generate a caption based on the available options. By default, the caption template uses $cite by $author, $date and automatically adjusts itself and its punctuation/format based on the presence of the available attributes. These substitution strings ($cite, $author, and $date) can also be used in a custom template passed to the helper.

  • $cite will be replaced wtih the name of the work provided via the work: key wrapped in the <cite> element and automatically be linked to the work if the url: key is provided. (The url: value will also be used for the cite attribute on the blockquote.)
  • $author will be replaced with the author’s name provided via the author: key.
  • $date will be replaced with the formatted date from a date string provided via the date: key. The date can be a complete date, just the year, or just the year and month. If a date cannot be parsed from the string, it will return the unmodified string.

Since the default template automatically modifies itself based on the available information, it’s generally a better option than customizing the caption template. If a custom template is provided, while one could embed all of the relevant content directly in the template, it’s still better to create a custom template that uses the substitution strings and the helper keys (work, author, date, and url) because the helper and component intelligently generate a URL to the work and fill in the cite attribute for the blockquote as well as wrapping the work in a <cite> element within the caption. This also has the added bonus of keeping the captions more consistent across uses.

Pull Quotes

Pull quotes are purely design elements.

While traditional quotations and blockquotes are used for content, There’s also an option to create pull quotes to draw attention to specific ideas in an article. Like figure elements, they also support using the figure classes for layout.

Pull quotes are purely design elements. They provide a handy way to visually emphasize a quote from an article. They’re meant to be decorative and support the standard layout variants. They generally work best when used with the wide or margin pull variants.

Pull quotes22The name pull used in the classes that adjust layout for figures, callouts, and similar content on this site originated from the concept of “Pull Quotes”. are also handy for using in social cards. So in the future, the pull quote helper could be updated to include a convenient way to share the quote by auto-generating OpenGraph cards using the quote.

Really long pull quotes can use the entire width of the article.