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/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/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/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/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