Blockquote

Pullquote layout with author info.

Twig Usage

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.'
} 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 attributes object. Applies extra HTML attributes.	`object`	—	—
content	The main blockquote content.	`any`	—	—
size	Text size.	`string`	`large`	`medium`, `large`, `xlarge`
weight	Text weight.	`string`	`semibold`	`semibold` or `bold`
align_items	Aligns items left, center, or right.	`string`	`start`	`start`, `center`, `end`
border	Add a border.	`string`	`vertical`	`vertical`, `horizontal`, `none`
indent	Indent text.	`boolean`	`false`	—
no_quotes	Hide quotation marks.	`boolean`	`false`	—
logo	Add a logo.	`object`	—	`content` Display a logo. Image element is expected here. — `position` Position of the logo. `top` or `bottom`
author	Author of the quote.	`object`	—	`name` Author's name. — `title` Author's title. — `content` Display an author photo. Image element is expected here. — `image` Display an author photo. Image element is expected here. —

Install

npm install @bolt/components-blockquote

Dependencies

@bolt/core

Basic Blockquote

The simplest form of blockquote.

Demo

Light Theme

This is a blockquote component.

Dark Theme

This is a blockquote component.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
} only %}

HTML

Blockquote Author

Attribution for the quote.

Demo

If you're cooking and not making mistakes, you're not playing outside your safety zone.

Guy Fieri

Chef, restaurateur, and New York Times Best Selling author

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: "If you're cooking and not making mistakes, you're not playing outside your safety zone.",
  author: {
    name: 'Guy Fieri',
    title: 'Chef, restaurateur, and New York Times Best Selling author',
    image: guy_img,
  },
} only %}

HTML

Blockquote Logo

A home for a small, relevant image.

Demo

Default Position

This is a blockquote component with logo.position set to top (default).

Bottom Position

This is a blockquote component with logo.position set to bottom.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  logo: {
    content: paypal_logo,
    position: 'bottom',
  }
} only %}

HTML

Blockquote Size

Change the font size of the quote text.

Demo

Medium Size

This is a blockquote component with size set to medium.

Large Size

This is a blockquote component with size set to large.

Xlarge Size

This is a blockquote component with size set to xlarge.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  size: 'large',
} only %}

HTML

Basic Blockquote

Change the font weight of the quote text.

Demo

Semibold Weight

This is a blockquote component with weight set to semibold.

Bold Weight

This is a blockquote component with weight set to bold.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  weight: 'bold',
} only %}

HTML

Blockquote Align Items

Change the alignment of the blockquote.

Demo

Start Item Alignment

This is a blockquote component with align_items set to start.

Center Item Alignment

This is a blockquote component with align_items set to center.

End Item Alignment

This is a blockquote component with align_items set to end.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  align_items: 'end',
} only %}

HTML

Blockquote Border

Change the position of the border.

Demo

Vertical Border Option

This is a blockquote component with border set to vertical.

Horizontal Border Option

This is a blockquote component with border set to horizontal.

None Border Option

This is a blockquote component with border set to none.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  border: 'horizontal',
} only %}

HTML

Blockquote Indent

A boolean property for quote indentation.

Demo

No Indent

This is a blockquote component with indent set to false.

Has Indent

This is a blockquote component with indent set to true.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  indent: true,
} only %}

HTML

Blockquote No Quotes

A boolean property for quotation marks.

Demo

Has Quotes

This is a blockquote component with no_quotes set to false.

No Quotes

This is a blockquote component with no_quotes set to true.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  no_quotes: true,
} only %}

HTML

Blockquote Max-Width

A CSS Var to override the max-width of the blockquote.

Demo

Default Max Width Blockquote

This is a blockquote component with --c-bolt-blockquote-max-width set to 44rem. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.

400px Max Width Blockquote

This is a blockquote component with --c-bolt-blockquote-max-width set to 400px. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.

100% Max Width Blockquote

This is a blockquote component with --c-bolt-blockquote-max-width set to 100%. Bacon ipsum dolor amet pastrami rump pork bresaola boudin ball tip venison filet mignon frankfurter short loin pork loin prosciutto t-bone leberkas swine.

Twig

{% include '@bolt-components-blockquote/blockquote.twig' with {
  content: 'This is a blockquote component.',
  attributes: {
    style: '--c-bolt-blockquote-max-width: 100%;',
  }
} only %}

HTML

blockquote

blockquote docs

Blockquote

Pullquote layout with author info.

blockquote

blockquote author

blockquote logo

Default Position

Bottom Position

blockquote size

Medium Size

Large Size

Xlarge Size

blockquote weight

Semibold Weight

Bold Weight

blockquote align items

Start Item Alignment

Center Item Alignment

End Item Alignment

blockquote border

Vertical Border Option

Horizontal Border Option

None Border Option

blockquote indent

No Indent

Has Indent

blockquote no quotes

Has Quotes

No Quotes

blockquote max width

Default Max Width Blockquote

400px Max Width Blockquote

100% Max Width Blockquote

blockquote

blockquote docs Show Code Hide Code

Blockquote

Pullquote layout with author info.

blockquote Show Code Hide Code

blockquote author Show Code Hide Code

blockquote logo Show Code Hide Code

Default Position

Bottom Position

blockquote size Show Code Hide Code

Medium Size

Large Size

Xlarge Size

blockquote weight Show Code Hide Code

Semibold Weight

Bold Weight

blockquote align items Show Code Hide Code

Start Item Alignment

Center Item Alignment

End Item Alignment

blockquote border Show Code Hide Code

Vertical Border Option

Horizontal Border Option

None Border Option

blockquote indent Show Code Hide Code

No Indent

Has Indent

blockquote no quotes Show Code Hide Code

Has Quotes

No Quotes

blockquote max width Show Code Hide Code

Default Max Width Blockquote

400px Max Width Blockquote

100% Max Width Blockquote

blockquote docs

blockquote

blockquote author

blockquote logo

blockquote size

blockquote weight

blockquote align items

blockquote border

blockquote indent

blockquote no quotes

blockquote max width