Blockquotes - Typography

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

On this page

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.

Someone famous in Source Title
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.

Someone famous in Source Title
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.

Someone famous in Source Title
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>