Blockquote

The blockquote element is used to indicate the quotation of a large section of text from another source.

Overview
The Blockquote Component allows users to add blockquotes to their content. A blockquote is a formatting element in HTML used to indicate a quote or excerpt from another source. It is typically displayed as indented text with a visual styling to distinguish it from the surrounding text.
Overall, the Blockquote Flow Component is valuable for allowing users to add quotes or excerpts from other sources to their content clearly and visually.
Changing the Properties
Changing the variant
The variant changes the appearance of the blockquote. Valid values include default, brand, warning, error, success following the color guidelines from the Lightning Design System.
Adding an icon
Select one of the icons available to illustrate the content of your blockquote. An icon will be added next to the Title. 
Adding Interactions
No interactions are available.
Styling the Blockquote
From the Styles panel, you can find some styling settings for the Blockquote element: Margin, Size, Text, Border, Default, Brand, Warning, Error and Success.  Some styling settings will only apply to the variant selected.   
You can find the instructions for styling here.
Examples
As shown in the screenshots, those examples will provide blockquotes and detail the properties needed to create a similar blockquote.
Success With Icon X Small
Success blockquote example
Property
Value
Title
Keep in Mind
Content
The grouped combobox....
Variant
Success
Icon Name
utility:success
Icon Position
Left
Error
Error blockquote example
Property
Value
Title
Keep in Mind
Content
The grouped combobox....
Variant
Error
Specifications
Attributes
Name
Type
Description
content
String
Content for the blockquote
iconName
String
Icon displayed to the left or right of the title.
iconPosition
String
Describes the position of the icon. Options include left and right.
iconSize
String
The size of the icon. Valid values include xx-small, x-small, small, medium, large.
title
String
The title can include text and is displayed in the header.
variant
String
The variant changes the appearance of the blockquote. Valid values include default, brand, warning, error, success.
Events
No events available.
Styling Hooks
Name
Description
Border Color
Define a border color
Border Radius
Define a border radius
For each variant (Default, Brand, Warning, Error, Success)
Name
Description
Title Color
Define a title color
Background Color
Define a background color for the blockquote
Border Left Color
Define a border left color
Icon Background Color
Define an icon background color
Icon Foreground Color
Define an icon foreground color
Icon Foreground Color Default
Define an icon foreground color

Property	Value
`Title`	Keep in Mind
`Content`	The grouped combobox....
`Variant`	Success
`Icon Name`	utility:success
`Icon Position`	Left

Property	Value
Title	Keep in Mind
Content	The grouped combobox....
Variant	Error

Name	Type	Description
content	String	Content for the blockquote
iconName	String	Icon displayed to the left or right of the title.
iconPosition	String	Describes the position of the icon. Options include left and right.
iconSize	String	The size of the icon. Valid values include `xx-small`, `x-small`, `small`, `medium`, `large`.
title	String	The title can include text and is displayed in the header.
variant	String	The variant changes the appearance of the blockquote. Valid values include `default`, `brand`, `warning`, `error`, `success`.

Name	Description
Border Color	Define a border color
Border Radius	Define a border radius

Name	Description
Title Color	Define a title color
Background Color	Define a background color for the blockquote
Border Left Color	Define a border left color
Icon Background Color	Define an icon background color
Icon Foreground Color	Define an icon foreground color
Icon Foreground Color Default	Define an icon foreground color

Screen Components - Previous

Barcode Scanner

Next - Screen Components

Button

Last modified 12d ago