> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/blockquote.md).

# 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.

```html
<!-- 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.

```html
<!-- 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>
```

```js
// 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 <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/lwc-components/core-components/blockquote.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.