Blockquote

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-blockquote/rh-blockquote.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-blockquote/rh-blockquote.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
Copy to Clipboard Wrap lines

Usage

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

<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
Copy to Clipboard Wrap lines

rh-blockquote

A blockquote is a styled quotation and citation offset from other text styles on the page.

Slots 3
Slot Name Description

Provide a quote for the blockquote
author

Provide an author for the blockquote
title

Provide an author title for the blockquote
Attributes 5
Attribute DOM Property Description Type Default
title title 
string
 
'Blockquote'
color-palette colorPalette

Set the colorPalette of the blockquote. Possible values are:

  • lightest (default)
  • darkest
 
ColorPalette | undefined
 
unknown
align align

Set the alignment of the blockquote. Possible values are:

  • left (default)
  • center
 
'center' | 'inline-start'
 
'inline-start'
highlight highlight

Optional highlight attribute that, when present, shows a highlight on side of blockquote.

 
boolean
 
false
size size

Set the text size of the blockquote. Possible values are:

  • default
  • large
 
'default' | 'large'
 
'default'
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 18
Token Copy
--rh-color-accent-brand
--rh-color-icon-primary
--rh-color-text-primary
--rh-color-text-secondary
--rh-font-family-body-text
--rh-font-family-heading
--rh-font-size-body-text-2xl
--rh-font-size-body-text-lg
--rh-font-size-body-text-sm
--rh-font-size-body-text-xl
--rh-font-size-heading-md
--rh-font-weight-heading-bold
--rh-font-weight-heading-regular
--rh-length-lg
--rh-length-md
--rh-length-xl
--rh-line-height-body-text
--rh-line-height-heading
Edit this page on GitHub