Back to Blockquote-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

The Blockquote Component is used to emphasize quotes

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/blockquote@14.1.0

“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

Table of Contents

Edit this section, Opens in new window

Usage

Required 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, Opens in new window

Accessibility

  • Do not use this component to indent text. Screen readers use the <blockquote> element to:
    • Provide semantic understanding of page content by announcing blockquote as quote
    • Define a sectioning root in HTML5, which means that any <h1> - <h6> element doesn't become part of the document’s outline
  • To make the blockquote content accessible, use the <cite> attribute with a valid URL

This component has compliance with WCAG guidelines by:

  • Adding a <cite> element to refer to the source of the quote
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.6.3 (2021-09-17)

Bug Fixes

13.0.0 (2021-08-25)

chore

  • 🤖 Removing IE11 support from blockquote (83f1c4b), closes #336127

BREAKING CHANGES

  • 🧨 We are removing IE11 support

12.13.1 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.3.0 (2021-05-19)

Bug Fixes

  • 🐛 Fix spacing issues (83039ae)

12.0.0 (2021-05-05)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Blockquote is now extracted from the Core Component and is now a

separate component, Blockquote

Edit this section, Opens in new window
Contact us, Opens in new window