Skip to main content

Blockquote

A blockquote is a way to call out a section of content, usually text, as part of an inline presentation. It's used most commonly to represent a quote, for example, on a forum page where it's important to show the original post in relation to the reply.

Example

Windows and Unix implementations are similar in size. Windows has a larger implementation since CoreFX implements some Windows-only features, such as Microsoft.Win32.Registry but does not yet implement any Unix-only concepts. You will also see that the majority of the Linux and macOS implementations are shared across a Unix implementation.

Best practices

Blockquote is best used in an inline manner as part of a conversation or longer content piece such as an article or documentation page.

Do

  • Use for calling out sections of content that has a close relation with the text around the blockquote, or a quote for a reply.
  • Use for a significant amount of text that benefits from a block treatment.

Don’t

  • Don’t use blockquote for decorative effect only or place a blockquote in a random location on the page. It should tie in to the content around it.
  • Avoid using too many blockquotes one after another. It can be disruptive to the page flow and ability to visually scan the page quickly.

Also known as

Callout
Pull quote
Quote

Related

Heading
Paragraph
Subheading

Options

  • light: Use the f-lightweight component class name for the light option.

Development

  • Schema definition: The blockquote schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<blockquote class="c-blockquote">
    <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
</blockquote>

Default with citation

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<blockquote class="c-blockquote" cite="https://www.microsoft.com/en-us/">
    <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
</blockquote>

Lightweight

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.

<blockquote class="c-blockquote f-lightweight">
    <p class="c-paragraph">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio.</p>
</blockquote>