Blockquote

avonni-blockquote

Highlights a passage of text as a quotation, with optional title, icon and variant styling.

Overview

Blockquote is a Lightning Web Component that displays highlighted, set-apart content—such as a quote, callout, or note—with an optional title and icon.

Use it in your own Lightning Web Components to draw attention to important passages, tips, or warnings. You control the title, icon, icon position and size, and the styling variant, while the quoted content goes in the default slot.

Use Cases

• Callouts: Highlight a key tip or instruction within a page.
• Quotes: Set apart a testimonial or referenced statement.
• Notes and warnings: Use colored variants to flag info, success, or errors.
• Documentation: Emphasize important guidance in custom help content.
• Acknowledgements: Pair a message with an action button in the slot.

---

Variant Guidelines

Variant	Use Case
default	Neutral quotes or callouts.
brand	Branded tips or featured content.
success	Positive notes or confirmations.
warning	Cautionary guidance.
error	Problems or critical notes.

---

Use Case Examples

Example 1: Branded callout

Scenario: Highlight a branded tip with a title and a left icon.

<!-- proTip.html -->
<template>
    <avonni-blockquote
        title="Pro tip"
        icon-name="utility:info"
        icon-position="left"
        icon-size="small"
        variant="brand"
    >
        <p>Use keyboard shortcuts to navigate the record faster.</p>
    </avonni-blockquote>
</template>

Result: A branded blockquote with an info icon, a "Pro tip" title, and the tip text inside.

Example 2: Error note with an action

Scenario: Flag a problem and offer an acknowledge button in the slot.

<!-- errorNote.html -->
<template>
    <avonni-blockquote
        title="Action required"
        icon-name="utility:error"
        icon-position="left"
        icon-size="small"
        variant="error"
    >
        <p class="slds-m-bottom_x-small">
            Your subscription expires in 3 days. Renew to avoid interruption.
        </p>
        <lightning-button
            label="Acknowledge"
            onclick={handleAcknowledge}
        ></lightning-button>
    </avonni-blockquote>
</template>

// errorNote.js
import { LightningElement } from 'lwc';

export default class ErrorNote extends LightningElement {
    handleAcknowledge() {
        // Record that the user acknowledged the notice.
    }
}

Result: A red error blockquote with a title, message, and an Acknowledge button rendered in the slot.

---

Specifications

Attributes

Name	Description	Type	Default	Required
icon-name	Icon displayed to the left of the title.	String	—
icon-position	Describes the position of the icon. Options include left and right.	String	"left"
icon-size	The size of the icon. Valid values include xx-small, x-small, small, medium, large.	String	"small"
title	The title can include text and is displayed in the header.	String	—
variant	The variant changes the appearance of the blockquote. Valid values include default, brand, warning, error, success.	String	"default"

Slots

Slot	Description
default	Placeholder for your content in the blockquote.

Styling Hooks

CSS Variable	Type	Default
--avonni-blockquote-sizing-height	sizing	—
--avonni-blockquote-sizing-width	sizing	—
--avonni-blockquote-sizing-overflow	sizing	—
--avonni-blockquote-radius-border	radius	—
--avonni-blockquote-color-border	color	#f2f2f2
--avonni-blockquote-sizing-border	sizing	1px
--avonni-blockquote-styling-border	styling	solid
--avonni-blockquote-left-border-sizing-border	sizing	0.125rem
--avonni-blockquote-left-border-styling-border	styling	solid
--avonni-blockquote-brand-color-background	color	#fafaf9
--avonni-blockquote-brand-color-border-left	color	#0176d3
--avonni-blockquote-brand-title-text-color	color	#0176d3
--avonni-blockquote-brand-text-color	color	#3e3e3c
--avonni-blockquote-brand-icon-color-foreground	color	—
--avonni-blockquote-brand-icon-color-background	color	—
--avonni-blockquote-brand-icon-color-foreground-default	color	—
--avonni-blockquote-icon-radius-border	sizing	—
--avonni-blockquote-default-color-background	color	#fafaf9
--avonni-blockquote-default-color-border-left	color	#080707
--avonni-blockquote-default-title-text-color	color	#080707
--avonni-blockquote-default-text-color	color	#3e3e3c
--avonni-blockquote-default-icon-color-foreground	color	—
--avonni-blockquote-default-icon-color-background	color	—
--avonni-blockquote-default-icon-color-foreground-default	color	—
--avonni-blockquote-error-color-background	color	#fafaf9
--avonni-blockquote-error-color-border-left	color	#ba0517
--avonni-blockquote-error-title-text-color	color	#ba0517
--avonni-blockquote-error-text-color	color	#3e3e3c
--avonni-blockquote-error-icon-color-foreground	color	—
--avonni-blockquote-error-icon-color-background	color	—
--avonni-blockquote-error-icon-color-foreground-default	color	—
--avonni-blockquote-success-color-background	color	#fafaf9
--avonni-blockquote-success-color-border-left	color	#2e844a
--avonni-blockquote-success-title-text-color	color	#2e844a
--avonni-blockquote-success-text-color	color	#3e3e3c
--avonni-blockquote-success-icon-color-foreground	color	—
--avonni-blockquote-success-icon-color-background	color	—
--avonni-blockquote-success-icon-color-foreground-default	color	—
--avonni-blockquote-warning-color-border-left	color	#dd7a01
--avonni-blockquote-warning-title-text-color	color	#dd7a01
--avonni-blockquote-warning-text-color	color	#3e3e3c
--avonni-blockquote-warning-icon-color-foreground	color	—
--avonni-blockquote-warning-icon-color-background	color	—
--avonni-blockquote-warning-icon-color-foreground-default	color	—
--avonni-blockquote-title-font-family	font	SalesforceSans
--avonni-blockquote-title-font-weight	font	600
--avonni-blockquote-title-font-size	font	1rem
--avonni-blockquote-title-font-style	font	normal
--avonni-blockquote-title-line-height	sizing	1.25rem
--avonni-blockquote-title-letter-spacing	sizing	—
--avonni-blockquote-container-font-family	font	SalesforceSans
--avonni-blockquote-container-font-weight	font	600
--avonni-blockquote-container-font-size	font	1rem
--avonni-blockquote-container-font-style	font	normal
--avonni-blockquote-container-line-height	sizing	1.25rem
--avonni-blockquote-container-letter-spacing	sizing	—
--avonni-blockquote-warning-color-background	color	#fafaf9

Key Considerations

• Variant meaning: Choose the variant by intent, not just color preference.
• Slot content: Any markup—paragraphs, lists, buttons—can go in the default slot.
• Icon balance: Use icon-position and icon-size to keep the header visually balanced with the title.
• Conciseness: Keep titles short; the slot carries the detailed content.
• Best Practice: Match the variant to the message intent (e.g. success for positive notes, error for problems) so the color reinforces the meaning.

---

Troubleshooting Common Issues

• Content not showing: Confirm the quoted content is placed inside the tag's default slot.
• Wrong color: Verify the variant value matches an accepted option; an unknown value falls back to default.
• Icon not appearing: Ensure icon-name uses a valid SLDS name in the category:icon format.
• If issues persist: Contact our support team at [email protected] for assistance.