Blockquote

  • Variants
  • Default
  • Default Dark
  • Excerpt

Blockquotes are used to emphasize and draw attention to excerpts of text.

Blockquote-Default

Blockquote-Default

Variations

Usage

This block of copy typically has a reference citation and may or may not be repeated within page body. These <blockquote> tags can be supported by citation via the cite attribute.

Design Specifications

Blockquote-Default

Blockquote Default

Variations

Best practices

Do

  • Use to draw attention to a block of copy.
  • Use sentence case for the title bar.
  • Limit the length of content within tooltips to avoid the need for excessive scrolling.
  • Use specified drop shadow to help provide contrast between background and tooltip overlay.

Don’t

  • Overwhelm users with too much content.
  • Show media such as images, charts, or videos within tooltips.
  • Produce new sizes or colors for tooltips.

It is important to understand that in such cases pull quotes break the usual content flow which may make it harder for the readers to actually follow the argumentation of the article. In some cases it is more effective to avoid quotes (e.g. if a complex matter is described) while in other cases quotes can quicken and simplify the understanding (e.g. the main statement in the interview).

  • Beacon-Blockquote-V1.0.0.sketch (1131 kB)