Language selection

Search

Quotations

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use quotations to cite a group of words by someone other than the original author or speaker.

Design and coding

Basic use

Use to quote blocks of content from another source within your document.

Blockquotes

Use to indicate a large quotation of text that comes from another source.

Appearance

Default blockquote:

Text goes here.

Blockquote-reverse:

Text goes here.

Correct use

Compliance point(s):

  • Wrap <blockquote> around any quotations that are more than a few words in length
  • Use <p> inside of <blockquote>
  • Use .blockquote-reverse for a floated, right-aligned blockquote
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not add quotation marks (") (&quot;) or images of quotation marks to the text, as this is redundant styling
  • Do not use if you can link directly to the source content
  • Do not use if you can rephrase the content into concise, plain language
  • Do not use to format content that is not a quote
Code
// Default blockquote:
<blockquote>
  <p>...</p>
</blockquote>

// Right-aligned blockquote:
<blockquote class="blockquote-reverse">
  <p>...</p>
</blockquote>

Cite a source

Use to identify the the content author, as well as title of the source.

Appearance

Blockquote with default footer:

Text goes here.

Author's name
Title of Cited Source Content

Blockquote with a right-aligned footer:

Text goes here.

Author's name
Title of Cited Source Content
Correct use

Compliance point(s):

  • Name the quote source when possible with <footer> (author's name) and <cite> (source title)
  • Use a <br> to place the title of the cited source under the author's name
  • Capitalize the cited source title the same as the author does
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not omit the quotation source when a quote is cited
Code
// Default footer:
 <blockquote>
   <p>...</p>
   <footer>Author's name<br>
    <cite>Title of Cited Source Content</cite>
  </footer>
</blockquote>

// Right-aligned footer:
<blockquote>
  <p>...</p>
  <footer class="text-right">Author's name<br>
    <cite>Title of Cited Source Content</cite>
 </footer>
</blockquote>

-“- Inline quotes

Use inline quotes for snippets of content that are quoted from another source. They appear within a sentence.

Appearance

Complete sentence with colon: "Quoted sentence!"

Someone states or intro phrase, "section of quoted text."

Someone states or intro phrase, "Quoted sentence."

Introductory phrase, "section of quoted text that now needs a comma," text text text.

Correct use

Compliance point(s):

  • Use inline quotes if the quote is less than a few words in length
  • Use double quotation marks (") (&quot;) for inline quotes
  • Wrap the quote in quotation marks and <q> element
  • Place periods and commas inside the closing </q>
    • This is the style CRA uses for quotation marks
    • Unless they are part of the original quotation, place all other marks outside the quotation marks
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use if the content can be rephrased into concise, plain language
Code

// Complete sentence with colon, then quote:
<p>Complete sentence: &quot;<q>Quoted sentence!&quot;</q></p>

// Someone states or intro phrase, then quote:
<p>..., &quot;<q>...&quot;</q></p>

// Someone states or intro phrase, quote that now needs a comma:
<p>..., &quot;<q>...,&quot;</q> ...</p>

Use to identify a title, button, or action that is not a link.

Appearance

Then select the "Sign in" button.

Correct use

Compliance point(s):

  • Use quotation marks to identify a title, button, or action that is not around or in a link
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use quotations around a link
  • Do not use if the content can be rephrased into concise, plain language
Code
<p>... &quot;...&quot; ...</p>
Date modified: