Blockquote

Pullquote layout with author info.

Published Last updated: 2.24.1 Change log Github NPM
Twig 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
weight

Text weight.

string semibold
  • semibold or bold
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
lang

Set language-specific quotation marks. By default, inherits the value of the closest lang attribute. While any valid lang valid is accepted, choosing en, de, fr, or ja will optimize how quotes are displayed in these languages.

string
logo

Add a logo component.

object
author

Author of the quote.

object
Install Install
  npm install @bolt/components-blockquote
Dependencies @bolt/components-headline @bolt/components-image @bolt/components-logo @bolt/components-text @bolt/core-v3.x @bolt/lazy-queue