blockquote docs

Blockquote

Getting Started

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: "
The greater danger for most of us lies not in ... achieving our mark.
"
} only %}

Schema

Name Type Value(s) Description Default
attributes object

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

 N/A
content* string

Text to appear in blockquote.

 N/A
size string
  • large, xlarge, xxlarge

Text size.

 xlarge
alignItems string
  • left, center, right

Aligns items left, center, or right.

 left
border string
  • vertical, horizontal, none

Add a border.

 vertical
indent boolean

Indent text.

 false
fullBleed boolean

Width of the brower window.

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

      Set to true to invert the logo colors.


      Type: boolean

Add a logo component.

 N/A
author object
    • name

      Author's name.

    • title

      Author's title.

    • image
      • @bolt-components-image/image.schema.yml > Object details
        • 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
        • 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.


          Type: string
        • useAspectRatio

          Use the ratio wrapper around the image to maintain a specific image ratio. This ratio is either determined from the image, or by passing in height and width arguements.


          Type: boolean
          • TRUE OR FALSE
        • 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:

Author of the quote.

 N/A

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