Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Block quotes - Component

No Cite
View full screen
Code

Source (Nunjucks)

<blockquote>
<p>{{ data.quote }}</p>
{% if data.cite %}
<cite>{{ data.cite }}</cite>
{% endif %}
</blockquote>

Output

<blockquote>
<p>
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
<cite>Adipiscing Ornare</cite>
</blockquote>

Information

Use block quotes to emphasize a quotation that's important to the main idea of a post. (For example, in a case study you might include a quotation from someone on the partner organization's management team.)

Always include a <cite> element indicating the quote's source at the end of a block quote.

Variants

No Cite

View full screen
Code

Source (Nunjucks)

<blockquote>
<p>{{ data.quote }}</p>
{% if data.cite %}
<cite>{{ data.cite }}</cite>
{% endif %}
</blockquote>

Output

<blockquote>
<p>
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non
metus auctor fringilla.
</p>
</blockquote>

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.