Portland Community College | Portland, Oregon Portland Community College

Quotes

Use quotes when including a citation or testimonial on a page. Depending on the type of quote, use a different HTML element and styling. We have blockquotes, pullquotes, inline quotes and testimonial callouts.

Blockquotes

Use a blockquote to specify a section of text that is quoted from another source. An HTML cite tag (to show who said the quote) and HTML p tags (to break the quote into multiple paragraphs) are optional.

Blockquote examples
With no paragraph tags, with cite tag:

“This is a quote. Students like reading other student’s thoughts and opinions on the website.” Person who said the quote

With paragraph tags:

“This is a quote with multiple paragraphs.”

“Students like reading other student’s thoughts and opinions on the website.”

Blockquote development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • html blockquote tag
  • Don’t put the cite” (dash) in the HTML – it’s added automatically by the CSS
  • You can have <p> tags inside the blockquote, or not

Pullquotes

A pullquote is a quotation or excerpt from the content text. They float to the right, have a quotation mark icon, and can have optional cite tags. Most pullquotes on the PCC website are found in PCC News.

Pullquote example

This is a pullquote. Pullquotes are aligned to the right side of the page.

 

Pullquote development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • blockquote class="pullquote"
  • Don’t add the icon manually – the CSS adds it automatically

Inline quotes

Using a true inline quote (HTML <q> tags) for citations is more accessible than simply using quotation marks.

Inline quote example

This is a paragraph which has a quote.

Inline quote development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • HTML <q> element
  • Don’t add the quotation marks manually – the CSS adds them automatically.

Testimonial callouts

If you want to include a quote, such as a testimonial, in the sidebar, use a highlight callout containing a blockquote.

Testimonial callout example
Testimonial

Working on a recently funded National Science Foundation grant was a growing and learning opportunity for me. The Grants Office staff masterfully shaped the nebulous and sometimes disparate ideas held by a diverse group of stake holders into a grant proposal for which everyone is proud. Spencer Hinkle, Faculty Chair, Building Construction Technology, Rock Creek Campus

Testimonial callout development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • div class="highlight" with a blockquote inside