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 development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Use the 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.
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.”

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

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

Inline quotes

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

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

This is a paragraph that has a quote.

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 development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • <div class="highlight"> with a <blockquote> inside.
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