Blockquote

OverviewStyleGuidelinesCodeAccessibilityDemos

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.0/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.0/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.11/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.0/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/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.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/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.0/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
Full CSS Variable Permalink to this token
--rh-color-icon-primary
Full CSS Variable Permalink to this token
--rh-color-text-primary
Full CSS Variable Permalink to this token
--rh-color-text-secondary
Full CSS Variable Permalink to this token
--rh-font-family-body-text
Full CSS Variable Permalink to this token
--rh-font-family-heading
Full CSS Variable Permalink to this token
--rh-font-size-body-text-2xl
Full CSS Variable Permalink to this token
--rh-font-size-body-text-lg
Full CSS Variable Permalink to this token
--rh-font-size-body-text-sm
Full CSS Variable Permalink to this token
--rh-font-size-body-text-xl
Full CSS Variable Permalink to this token
--rh-font-size-heading-md
Full CSS Variable Permalink to this token
--rh-font-weight-heading-bold
Full CSS Variable Permalink to this token
--rh-font-weight-heading-regular
Full CSS Variable Permalink to this token
--rh-length-lg
Full CSS Variable Permalink to this token
--rh-length-md
Full CSS Variable Permalink to this token
--rh-length-xl
Full CSS Variable Permalink to this token
--rh-line-height-body-text
Full CSS Variable Permalink to this token
--rh-line-height-heading
Full CSS Variable Permalink to this token