Blockquote
On this page
On this page
Overview
A blockquote is styled quote text with an icon and attribution text.
Edit element properties
import '@rhds/elements/rh-blockquote/rh-blockquote.js';<rh-blockquote>
<p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
<span slot="author">Linus Torvalds</span>
<span slot="title">Software Engineer</span>
</rh-blockquote>Set the colorPalette of the blockquote. Possible values are:
lightest(default)darkest
Set the alignment of the blockquote. Possible values are:
left(default)center
Optional highlight attribute that, when present, shows a highlight on side of blockquote.
Set the text size of the blockquote. Possible values are:
defaultlarge
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- Feature a quote from an external source
- Highlight positive feedback or reviews from customers
- Break up large portions of text
A blockquote including a quote icon, quotation text, and citation text
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
