Blockquote

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-blockquote
  1. Usage
  2. rh-blockquote

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-blockquote/rh-blockquote.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-blockquote/rh-blockquote.js": "./elements/rh-blockquote/rh-blockquote.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

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>

rh-blockquote

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