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: "The greater danger for most of us lies not in ... achieving our mark.
"
} 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) |
---|---|---|---|---|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
Text to appear in blockquote (Twig only). May be plain text or text wrapped in < p> tags. |
string
| — |
|
|
Text size. |
string
|
xlarge
|
|
|
Aligns items left, center, or right. |
string
|
left
|
|
|
Add a border. |
string
|
vertical
|
|
|
Indent text. |
boolean
|
false
|
|
|
Width of the brower window. |
boolean
|
false
|
|
|
Hide quotation marks. |
boolean
|
false
|
|
|
Add a logo component. |
object
| — |
|
|
Author of the quote. |
object
| — |
|