2.24.1
Blockquote Component in Bolt
Stylistic pull quote styles for all types of layout. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-blockquote
Block quotes provide testimonials throughout the pega experience.
{% include "@bolt-components-blockquote/blockquote.twig" with {
content: "<p>The greater danger for most of us lies not in ... achieving our mark.</p>"
} only %}
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
|
|
weight | Text weight. |
string
|
semibold
|
|
alignItems | Aligns items left, center, or right. |
string
|
left
|
|
border | Add a border. |
string
|
vertical
|
|
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 |
string
| — |
|
logo | Add a logo component. |
object
| — |
|
author | Author of the quote. |
object
| — |
|
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
lang
attribute. Override that value by setting the lang
prop directly on the component.
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.
Echtzeit bedeutet Relevanz. Kunden erwarten von uns, dass wir jederzeit wissen, was sie gerade denken.
Davantage de temps réel, c'est plus de pertinence. Les clients s’attendent à ce que nous lisions dans leurs pensées, dans l’instant présent.
リアルタイムであればあるほど、関連性は高まります。顧客は自分たちが今何を考えているかこちらが把握することを期待しています。
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.
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.
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.
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.
weight
: semibold
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.
weight
: bold
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.
size
: large
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.
size
: xlarge
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.
size
: xxlarge
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.
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.
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.
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.