Blockquotes

For quoting blocks of content from another source within your document.

Overview

For quoting blocks of content from another source within your document. Wrap Blockquote component around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.

A well-known quote, contained in a blockquote element.

vue
<template>
 <BBlockquote>
  <b-p>A well-known quote, contained in a blockquote element.</b-p>
 </BBlockquote>
</template>

Naming a source

The HTML spec requires that blockquote attribution be placed outside the Blockquote component.

When providing attribution, wrap your Blockquote component in a Figure component and use a footer attribute or a block level element (e.g., <P>) with the Figcaption component class.

Be sure to wrap the name of the source work in <cite> tag as well.

A well-known quote, contained in a blockquote element.

vue
<template>
 <BBlockquoteFigure>
  <BBlockquote>
   <b-p>A well-known quote, contained in a blockquote element.</b-p>
  </BBlockquote>
  <BBlockquoteFooter>
   Someone famous in
   <cite title="Source Title">Source Title</cite>
  </BBlockquoteFooter>
 </BBlockquoteFigure>
</template>

Alignment

Use text-alignment attribute as needed to change the alignment of your blockquote.

A well-known quote, contained in a blockquote element.

vue
<template>
 <BBlockquoteFigure text-alignment="center">
  <BBlockquote>
   <b-p>A well-known quote, contained in a blockquote element.</b-p>
  </BBlockquote>
  <BBlockquoteFooter>
   Someone famous in
   <cite title="Source Title">Source Title</cite>
  </BBlockquoteFooter>
 </BBlockquoteFigure>
</template>

A well-known quote, contained in a blockquote element.

vue
<template>
 <BBlockquoteFigure text-alignment="end">
  <BBlockquote>
   <b-p>A well-known quote, contained in a blockquote element.</b-p>
  </BBlockquote>
  <BBlockquoteFooter>
   Someone famous in
   <cite title="Source Title">Source Title</cite>
  </BBlockquoteFooter>
 </BBlockquoteFigure>
</template>

See Also