Skip to content

Blockquote13.10.5

> Don't you worry about a thing!™


$ npm i @if-design-system/blockquote@13.10.5

“Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.”

—Aldous Huxley, Brave New World
Edit this section

Usage

Principles

Content

To make the block quote content accessible, follow these rules:

  • Must be quoted from another source, whose address, if it has one, may be cited in the attribute
  • If the attribute is present:

    • Must be a valid URL
    • Link only to canonical end-state URLs with no parameter appended
    • Capitalize the cited source title the same as the author does
Edit this section

Accessibility

  • Do not use this component to indent text. Screen readers use the

    element to:

    • Provide semantic understanding of page content by announcing blockquote as quote
    • Define a sectioning root in HTML5, which means that any

      -

      element doesn't become part of the document’s outline
  • To make the blockquote content accessible, use the attribute with a valid URL

This component has compliance with WCAG guidelines by:

  • Adding a element to refer to the source of the quote
Edit this section

Anatomy

“Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.”

—Aldous Huxley, Brave New World
Blockquote
  1. Quote
  2. Footer, contains author/source and where the citation is from
  3. Cite
Edit this section

Specs

“Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.”

—Aldous Huxley, Brave New World
Edit this section

Implementation

Markup

If you simply want to put a blockquote by itself within a custom container, use this code:

<blockquote class="if" cite="https://www.huxley.net/bnw/four.html">
  <p class="if">
    “Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.”
  </p>
  <footer class="if">—Aldous Huxley, <cite class="if">Brave New World</cite></footer>
</blockquote>

If you want the blockquote to cover the width, with a block, use this:

<div class="if block">
  <div class="if container">
    <blockquote class="if" cite="https://www.huxley.net/bnw/four.html">
      <p class="if">
        “Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.”
      </p>
      <footer class="if">—Aldous Huxley, <cite class="if">Brave New World</cite></footer>
    </blockquote>
  </div>
</div>
Edit this section

Contact us