The Blockquote Component is used to emphasize quotes
This component provides
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @email@example.com
Table of ContentsEdit this section, Opens in new window
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>
- Do not use this component to indent text. Screen readers use the
- Provide semantic understanding of page content by announcing blockquote as quote
- Define a sectioning root in HTML5, which means that any
<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
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
- 🤖 Rename util to utils (f78721f)
- 💡 Rename scope and repository (3ea5423)
- 💡 Use new navigation structure for documentation (415aee5), closes #490579
- 🧨 The scope for If Design System npm packages has now changed from
@ids-core. We have also renamed the repository
- 🧨 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!
- 🎸 Input field hot reload (eac76b7)
- 🧨 We are removing IE11 support
- 🐛 Fix spacing issues (83039ae)
- 💡 Refactor out Blockquote from core (9855dbd), closes #336508
- 💡 Rename and consolidate mixins (67cf470), closes #268081
- 🧨 All of the mixins have now been renamed
- 🧨 Blockquote is now extracted from the Core Component and is now a
separate component, Blockquote