Quotes
Use quotes when including a citation or testimonial on a page. Depending on the type of quote, one of the types below.
Jump to a component:
Blockquotes
Use a blockquote to specify a section of text that is quoted from another source. A citation is optional (but recommended if possible).
Styling
Blockquotes have a teal border on the left side, more padding around the text than normal paragraphs, and the text is lighter gray and italicized. The citation is on a new line, is right-aligned, and has a “—” (dash) before the text.
How to use for Blockquotes
Add in the HTML (see “development info”).
Development info for Blockquotes
Stylesheet location:
/_source/styles/base/_typography.scss
- Do add the quotation marks, the CSS doesn’t add those.
- Blockquotes can have one paragraph or multiple.
- The citation is optional, but don’t put the
<cite>“—” (dash) in the HTML, it’s added automatically by the CSS.
<blockquote>"Quote" <cite>Citation</cite></blockquote>
Example of Blockquotes
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. Most pullquotes on the PCC website are found in PCC News. A citation is optional (but recommended if relevant).
Styling
Pullquotes look like blockquotes, but are right-aligned, 50% width, and include a large quotation mark icon in the upper left.
Responsive behavior for Pullquotes
Pullquotes change to full-width on small screens.
How to use for Pullquotes
Add in the HTML (see “development info”).
Development info for Pullquotes
Stylesheet location:
/_source/styles/base/_typography.scss
Don’t add the icon manually – the CSS adds it automatically.
<blockquote class="pullquote">"Quote" <cite>Citation</cite></blockquote>
Example of Pullquotes
This is a pullquote. Pullquotes are aligned to the right side of the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis feugiat massa, a lacinia ex ullamcorper id. Vestibulum fringilla ex nunc, at tincidunt mi pellentesque et. Duis dignissim, mauris ac fermentum pulvinar, felis ex ornare metus, et tempus augue lectus et orci.
Inline quotes
Using a true inline quote (HTML <q> tags) for citations is more accessible than simply using quotation marks.
Styling
Inline quotes look like regular text inside quotation marks.
How to use for Inline quotes
Add in the HTML (see “development info”).
Development info for Inline quotes
Stylesheet location:
/_source/styles/base/_typography.scss
Don’t add the quotation marks manually – the CSS adds them automatically.
<q>Quote</q>
Example of Inline quotes
This is a paragraph that has a quote
.
Testimonial callouts
Testimonial callouts are highlight callouts with a blockquote inside.