Follow

Quotes

Tempest offers 2 quote styles: Blockquotes and Pull Quotes.  Each of these styles include site-level customization options that can be seen here.

Pull Quote vs. Blockquote

It is helpful to understand the definitions of each Quote type since this is also reflected in their functions and capabilities on tempest.

  • blockquote (block quotation) refers to a large-ish quotation from content that is from another source, not duplicated from the existing body of text; e.g., another article, or a book, website. 
  • A pull quote refers to a quotation from the same article, and is intended to make an important point stand out.

Based on these definitions, the design philosophy for a Blockquote is to keep this rather quiet, inline, with some customization options but nothing that is too loud. The design philosophy for a Pull Quote is to support louder treatments, alignment options, and to really support a bright callout from the rest of the content. 

Blockquotes and Pull quotes not only appear different but are considered different types of content for things like bots, Google, etc – Blockquotes appear as part of the content, meaning, as part of the body vs. pull qutoes which do not appear as part of the body. This is because pull quotes are redundant to the body copy (you're pulling out content that is already part of the body and calling it out with an emphasis) to avoid this appearing as duplicate content it is not considered as part of the body.

Blockquotes Default

The new Blockquotes feature was built on top of our pre-existing quotes feature. The spirit behind these design changes was to bring this feature closer to what we see as the industry standard. The changes include:

  • Instead of having a top and bottom border, we just have a left border (which can also be turned on/off)
  • We will continue to support alignment for existing quote data – for example, wrap left and wrap right is maintained for existing quotes – however,  alignment is not supported for Blockquotes moving forward. By their very definition, Blockquotes are a "block" and therefore always presented inline. No other alignment options are supported.

 

Pull Quotes Default

Pull Quotes by definition are meant to draw emphasis to a line/quote from the content itself. Since this content is meant to be more visually distinct –  louder – our default Pull Quote pulls has font size set to Large and text color set to Palette Primary.

Additional Customization

Blockquotes Configuration Options Default
Font Family
  • Headline Primary
  • Headline Secondary
  • Body Primary
  • Body Secondary
  • UI
  • Meta
Headline Secondary
Font Size
  • XS
  • S
  • M
  • L
  • XL
XS
Text Transform
  • None
  • Uppercase
None
Text Color
  • Palette Primary

  • Palette Accent

  • Palette Tone Black

  • Palette Tone Dark

  • Platte Tone Mid

  • Palette Tone Light

  • Palette Tone White

Palette Tone Mid
Text Link Color
  • Palette Primary

  • Palette Accent

  • Palette Tone Black

  • Palette Tone Dark

  • Platte Tone Mid

  • Palette Tone Light

  • Palette Tone White

Inherits the default link color defined for the site
Text Hover Color
  • Palette Primary

  • Palette Accent

  • Palette Tone Black

  • Palette Tone Dark

  • Platte Tone Mid

  • Palette Tone Light

  • Palette Tone White

Inherits the default hover color defined for the site
Border Left
  • Enabled 
  • Disabled 
Enabled
Background Color
  • Color picker, allowing any color to be defined

 Transparent

 

Pull Quotes Configuration Options Default

Font Family

  • Headline Primary
  • Headline Secondary
  • Body Primary
  • Body Secondary
  • UI
  • Meta
Body Secondary
Font Size
  • XS
  • S
  • M
  • L
  • XL
L
Text Align
  • Left
  • Center
Left
Text Transform
  • None
  • Uppercase
None
Text Color
  • Palette Primary

  • Palette Accent

  • Palette Tone Black

  • Palette Tone Dark

  • Platte Tone Mid

  • Palette Tone Light

  • Palette Tone White

+Hex color picker

Palette Primary
Text Link Color
  • Palette Primary

  • Palette Accent

  • Palette Tone Black

  • Palette Tone Dark

  • Platte Tone Mid

  • Palette Tone Light

  • Palette Tone White

+Hex color picker

Inherits the default link color defined for the site
Text Hover Color
  • Palette Primary

  • Palette Accent

  • Palette Tone Black

  • Palette Tone Dark

  • Platte Tone Mid

  • Palette Tone Light

  • Palette Tone White

+Hex color picker

Inherits the default hover color defined for the site
Background Color
  • Color picker, allowing any color to be defined
Transparent
Padding (in pixels)
  • Any value in increments of 5px
 0px
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk