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.
<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.
<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.
<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.
<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>