blockquote docs

2.7.0

Blockquote

Blockquote Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-blockquote
Source code
View on Github
Dependencies

Overview

Stylistic pull quote styles for all types of layout. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-blockquote

Description

Block quotes provide testimonials throughout the pega experience.

Content that can be contained in a blockquote

  • Logo or image (optional)
  • Quote
  • Attributor image (optional)
  • Attributor name (optional)
  • Attributor title (optional)
  • Attributor company (optional)

Additional info

  • Can be full width or confined with the grid
  • Can be left, center, or right aligned
  • can have top+bottom horizontal lines, a left or right vertical line, or no lines
  • Text is open sans
  • Quote marks are NOT inch marks
  • Quote marks are system font Georgia
  • Text color changes based on the theme colors

Usage

  {% include "@bolt-components-blockquote/blockquote.twig" with {
  content: "<p>The greater danger for most of us lies not in ... achieving our mark.</p>"
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
content *

Text to appear in blockquote (Twig only). May be plain text or text wrapped in

<

p> tags.

 string —
  • —
size

Text size.

 string xlarge
  • large, xlarge, xxlarge
alignItems

Aligns items left, center, or right.

 string left
  • left, center, right
border

Add a border.

 string vertical
  • vertical, horizontal, none
indent

Indent text.

 boolean false
  • —
fullBleed

Width of the brower window.

 boolean false
  • —
no_quotes

Hide quotation marks.

 boolean false
  • —
logo

Add a logo component.

 object —
  • @bolt-components-logo/logo.schema.yml > Object details
    • invert

      Set to true to invert the logo colors.


      Type: boolean
      • —
author

Author of the quote.

 object —
    • name

      Author's name.

      • —
    • title

      Author's title.

      • —
    • image
      • @bolt-components-image/image.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
          • —
        • src

          Source url for image.


          Type: string
          • —
        • alt

          Alt tag for image.


          Type: string
          • —
        • lazyload

          Lazyload can boost performance by loading images on demand, instead of on initial page load.


          Type: boolean
          • true or false
        • no_lazy

          Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.


          Type: boolean
          • true or false
        • placeholder_color

          A valid CSS background color property shown while image loads.


          Type: string
          • —
        • placeholder_image

          Image path or image data shown while image loads.


          Type: string
          • —
        • srcset

          A comma seperated string of image urls and image widths, used for optimizing image loading performance.


          Type: string
          • —
        • sizes

          A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition (omitted for the last item), and a source size value. Learn more.


          Type: string
          • —
        • useAspectRatio

          Use the ratio prop instead.


          Type: boolean
          • true or false
        • ratio

          Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to "none" to opt out of aspect ratio.


          Type: string OR boolean
          • —
        • max_width

          Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%".


          Type: string
          • —
        • width

          Override the default width of the image. If no height is provided, aspect ratio will be maintained.


          Type:
          • —
        • height

          Override the default height of the image. If no width is provided, aspect ratio will be maintained.


          Type:
          • —
        • cover

          Set an image to fill its container.


          Type: boolean
          • true or false
        • imageAttributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
          • —
        • valign

          Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).


          Type: string
          • —

blockquote

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote alignItems variation

alignItems: left

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: center

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

alignItems: right

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote indent variation

Indent: True

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Indent: False

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote border variation

Border: vertical

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: horizontal

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

Border: none

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote quote variation

No quotes

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote multiple paragraphs variation

Multiple Paragraph Content

Blockquote can have one paragraph. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.

Or it can have multiple paragraphs. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci.
Mike Mai Pegasystems

blockquote theme variation

theme: xlight

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: light

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: dark

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

theme: xdark

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
Michelangelo di Lodovico Buonarroti Simoni Renaissance Artist

blockquote web component

Web Component Usage Bolt Link is a web component that renders a semantic blockquote with Bolt styles. For a simple blockquote, wrap your quote content in the <bolt-blockquote> custom element. Note: you must wrap your quote text in <p> tags for the appropriate quotation marks to appear. Add attribution to the quote by adding the author-name, author-title, and author-image attributes to <bolt-blockquote>.

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
<bolt-blockquote author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg"> <p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p> </bolt-blockquote>
Additional Options Apply additional configuration options via attributes on the <bolt-blockquote> element. Attribute names and values match the Twig schema but use "kebab-case" instead of "camelCase". For example, alignItems becomes align-items.

The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.
<bolt-blockquote align-items="center" border="horizontal" author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg"> <p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p> </bolt-blockquote>
Advanced Usage To add a logo to <bolt-blockquote> place logo content (for example: <bolt-logo> or <img>) next to blockquote text, and add the attribute slot="logo" to the logo's outermost container.
PayPal Logo

The greater danger for most of us lies not in setting our aim too high and falling short...

In fact, the greater danger is setting our aim too low and achieving our mark.
<bolt-blockquote author-name="Michelangelo di Lodovico Buonarroti Simoni" author-title="Renaissance Artist" author-image="/images/placeholders/500x500.jpg"> <img slot="logo" src="/images/content/logos/logo-paypal.svg" alt="PayPal Logo"> <p>The greater danger for most of us lies not in setting our aim too high and falling short...</p> <p>In fact, the greater danger is setting our aim too low and achieving our mark.</p> </bolt-blockquote>