# Quote Callouts

**URL:** https://meta.discourse.org/t/quote-callouts/350962
**Category:** Theme component
**Created:** [February 6, 2025, 10:12pm UTC](https://meta.discourse.org/t/quote-callouts/350962 "2025-02-06T22:12:22Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 6, 2025, 10:12pm UTC](https://meta.discourse.org/t/quote-callouts/350962/1 "2025-02-06T22:12:22Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Adds Obsidian-style callouts as an alternative for markdown quotes. |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/Arkshine/quote-callouts) |
| 🛠 | **Repository** | [GitHub - Arkshine/discourse-quote-callouts · GitHub](https://github.com/Arkshine/discourse-quote-callouts) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

This theme component adds support for [Obsidian-style callouts](https://help.obsidian.md/Editing+and+formatting/Callouts) in Discourse as an alternative for markdown quotes.

Callouts are a great way to highlight content and add notes, warnings, or other special messages to your posts.

 ![The image shows different types of annotation tool callouts, including a note, custom title, collapsible warning, and a title-only note. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/5/4/1/541d15a4117ab4e333f15ef8e8e2c372fdaec196.png)  
 ![The image displays a chat message notification stating that "It works in chat as well." (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/8/5/7/8574a2ee238e7b18c393bf2ac1dea212bcdcd8f8.png)

## Usage

To create callout, you have several ways.

### Markdown syntax

Add `[!type]` to the first line of a quote, where `type` is the type identifier. The type identifier determines how the callout looks and feels. To see all available types, refer to Supported types.

> ℹ The type identifier is case-insensitive.

```markdown
> [!tip] 
> **Tip** : Use `code snippets` to enhance readability. They provide clarity and precision.

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/6/7/3675dbcf45e48b1e88f47fe6d8f251efc48913ba.png)

#### Preview

```
You can change the type by clicking on the icon: 

![chrome_atmmLf0v3c|690x209](upload://hZYzuK1MCwo7vsMEV9uYEZZOqjn.jpeg) 

```

### Rich text editor

It’s now fully supported, please refer to _Rich text editor support_ section.

### Keyboard shortcut

- Ctrl + q — Insert an empty callout

### Toolbar

 ![chrome_7HSSbReBtO](https://global.discourse-cdn.com/meta/original/4X/e/7/b/e7bd86d2cfc1e5fbea1376031d4249a288df9c69.jpeg)  
 ![chrome_YaDrphqvbV](https://global.discourse-cdn.com/meta/original/4X/6/3/5/635bea715f9ffc5018b8738de16c986233516786.jpeg)

#### Chat

A button in the toolbar to insert a default callout is available.

 ![chrome_CWig42tWHY](https://global.discourse-cdn.com/meta/original/4X/7/6/d/76d5674fbc2dc07188bc4b24d483a5e85adaf63e.jpeg)  
 ![chrome_TsyfsoA82R](https://global.discourse-cdn.com/meta/original/4X/2/2/8/22847a19f440484f63e94f192f732dbaffdb9b66.jpeg)  
 ![chrome_nWk7hUyRGr](https://global.discourse-cdn.com/meta/original/4X/c/3/d/c3dee18db204017fe15879927b4baebc0223b06b.jpeg)

### Custom title

By default, the title of the callout is its type identifier in title case. You can change it by adding text after the type identifier:

```markdown
> [!question] Custom Label 🤗
> Callouts labels can be customized.

> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> They can also contain special inline formatting like dynamic dates.

```

 ![The image shows an example of a custom label and a date formatting with dynamic date in inline formatting. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/8/4/b/84b2fca7273699fba7cfba275dac02084e5fc740.png)

You can also create title-only callouts:

```markdown
> [!success] solved.

```

![chrome_z53bS1GCew](https://global.discourse-cdn.com/meta/original/4X/7/d/4/7d4748a50a4bb19e2ee9a332a82885afd8b903cf.png)

### Foldable callouts

You can make a callout foldable by adding a plus `+` or a minus `-` directly after the type identifier.

- `+` expands the callout by default
- `-` collapses it instead

```markdown
> [!todo]- My Todo List
>
> - [x] Write documentation
> - [] Add tests
> - [] Review code

> [!todo]+ My Expanded Todo List
>
> - [x] Create repository
> - [] Setup CI/CD
> - [] Deploy to production

```

 ![The image displays an expanded to-do list with tasks such as "Create repository," "Setup CI/CD," and "Deploy to production," partially completed, within a user's digital task management system. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/4/d/1/4d1baaea2a903f99ee5e1ffbef59345232f3bae3.png)

![The image shows a Todoist project titled "arkshine" with checkboxes for "Create repository," "Setup CI/CD," and "Deploy to production" under "My Expanded Todo List," and options "My Todo List" and "My Expanded Todo List" visible. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/7/9/4/794e3ff78c7590cc0870e9a7ed04f58a4d1c59e4.gif)

### Nested callouts

You can nest callouts in multiple levels.

```markdown
> [!question] Can callouts be nested?
>
> > [!todo] Yes!, they can.
> >
> > > [!example] You can even use multiple layers of nesting.

> [!tip]
> Here's a helpful tip
>
> > [!info]
> > With some additional information
> >
> > > [!example]
> > > And a nested example
>
> Back to the main tip

```

 ![The image shows interactable tips on UI design, explaining that callouts can be nested within other callouts and providing an example. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/b/2/3/b2321ee00d8c4fe369ba89a42ad4aba4b0cf0834.png)

## Supported default types

You can use several callout types and aliases.  
Each type comes with a different background color and icon.

> ℹ You can create your callouts or manage the default ones.  
> See the `callouts` setting.

> ℹ Any unsupported type defaults to the `note` type. See Default Fallbacks section for more information.

> ℹ The type identifier is case-insensitive.

| Type | Description | Aliases |
| --- | --- | --- |
| `note` | For general notes and information | - |
| `abstract` | For summaries or abstract sections | `summary`, `tldr` |
| `info` | For informational content | - |
| `todo` | For task lists or todo items | - |
| `tip` | For tips and important information | `hint`, `important` |
| `success` | For success messages | `check`, `done` |
| `question` | For questions and FAQs | `help`, `faq` |
| `warning` | For warnings | `caution`, `attention` |
| `failure` | For failure notices | `fail`, `missing` |
| `danger` | For danger or error messages | `error` |
| `bug` | For bug reports or known issues | - |
| `example` | For examples | - |
| `quote` | For quotes | `cite` |

 ![The image displays markdown notation examples for notes, abstracts, to-do lists, tips, and questions, illustrating the use of italics, bold text, links, formatted items, bullet points, code snippets, and check marks. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/b/d/abd69f65f4ed7057834cae8147b6e3e18370cc0b.png)

 ![The image presents a warning about protecting data, a message about viewing failure constructively, a caution on managing tasks with care, an explanation of bugs in code, an example of using markdown lists, and a motivational quote about not letting doubts limit one's potential. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/2/5/e/25e61eeee408f6c785b277563e94a68510b97eb9.png)

## Customization

### Icon

You can use either [FontAwesome](https://fontawesome.com/search?ic=free-collection) icon or directly provide an SVG element.

#### SVG element

While the free FontAwesome version provides many choices, you may feel limited sometimes.  
You can provide an SVG element `<svg>...</svg>`.

Example: [Lucile icons](https://lucide.dev/icons/) – It’s a great set with the advantage of choosing the stroke width.

1. Select an icon
2. Adjust the Stroke width
3. Click on Copy SVG
4. Go to the theme component settings and paste the content

 ![The image displays the Lucide app interface with a customizable icon drawer, showcasing an emoji-style "party-popper" icon example and a code snippet highlighting how to import icons from Lucide using SVG and JSX formats. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/b/e/f/befb58121c2aed84660235bb5b95ba7a9d682a50.png)  
 ![The image shows a form interface for adding a confetti callout with options for type, alias, and an SVG icon with specified width and height dimensions. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/8/0/a8022d06439af35f48b07f46fdaa29fda56a5e6c.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/a/a/7/aa7ae29eb3e1bbff8eba4c731340b422c089f3d7.png)

### Default Fallbacks

You can set default values for when a specified callout type isn’t found with the following settings:

- `callout_fallback_type`
- `callout_fallback_icon`
- `callout_fallback_color`

```markdown
> [!discourse is fantastic]
> Yes.

```

 ![chrome_02DZB72MyB](https://global.discourse-cdn.com/meta/original/4X/f/a/0/fa034f10d90226d91502e76e3b60d03ab09a6ef1.png)

### Global configuration

You can customize various aspects of the callouts through

- Background opacity
- Border properties (width, style, color, radius)
- Padding
- Title font properties (size, weight)
- Space between icon and title

### Per-Callout configuration

Each callout type can be customized with:

- Custom icon
- Title text
- Color scheme
- Border properties

See the Settings section below.

 ![The image displays two text callouts: one highlighting that it's a simple note with an icon, and the other suggests using callouts to highlight important information with a flame icon. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/a/e/aae93c3aa643e3f8575aafaaaf8ebb81328d9e45.png)

## Settings

> **List**
>
> | Setting | Description |
> | --- | --- |
> | **callouts** | Define the callouts. |
> | **callout\_fallback\_type** | The default callout type to use when the specified type is not found.  
> Default value: `note` |
> | **callout\_fallback\_icon** | The default icon to use when the specified type is not found.  
> Default value: `far-pen-to-square` |
> | **callout\_fallback\_color** | The default color to use when the specified type is not found.  
> Default value: `#027aff` |
> | **callout\_background\_opacity** | The global background opacity for the callout (1 to 100).  
> Default value: `10` |
> | **callout\_border\_width** | The global border width for the callout.  
> Default value: `empty` |
> | **callout\_border\_style** | The global border style for the callout.  
> Default value: `empty` |
> | **callout\_border\_color** | The global border color for the callout.  
> Default value: `empty` |
> | **callout\_border\_radius** | The global border radius for the callout.  
> Default value: `var(--d-border-radius)` |
> | **callout\_padding** | The global padding for the callout.  
> Default value: `0.75em 0.75em 0.75em 1.5em` |
> | **callout\_title\_font\_size** | The global font size for the callout title.  
> Default value: `inherit` |
> | **callout\_title\_font\_weight** | The global font weight for the callout title.  
> Default value: `bold` |
> | **callout\_title\_gap** | The global gap between the callout icon and title.  
> Default value: `0.5em` |
> | **callout\_icon\_sizep** | The global size for the callout icon. |
> | **callout\_transition\_duration\_ms** | The duration of the open and close animation (ms). |
> | **svg\_icons** | List of FontAwesome 6 icons used in this theme component. |
> 
> Per-callout setting page:
> 
> | Setting | Description |
> | --- | --- |
> | **Type\*** | The type of the callout.  
> This identifier will be used in the callout syntax: `[!type]` |
> | **Alias** | The aliases for the callout, separated by `|`.  
> Example: `cite|quote` |
> | **Icon** | The [fontawesome](https://fontawesome.com/search?ic=free) icon for the callout.  
> You might need to add it to `svg_icons` setting if it’s not available in the default subset.  
> Alternatively, you can provide an SVG element directly, e.g. `<svg>...</svg>` |
> | **Icon size** | The size for the callout icon.  
> Note: Use only valid CSS values, e.g. `1em`, `16px`, `1.5rem` |
> | **Title** | The title for the callout.  
> If no title is provided in the callout, this setting will be used.  
> Note: if both are empty, the title will be the callout type. |
> | **Color** | The color for the callout.  
> This will be used for the background, title, and icon.  
> Note: Use only hexadecimal color codes, e.g. `#027aff` |
> | **Border width** | The [border width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for the callout. |
> | **Border style** | The [border style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) for the callout. |
> | **Border color** | The [border color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) for the callout.  
> Important: if you’re using CSS functions to produce an alpha value, such as `rgba`, make sure not to use spaces between the values, e.g., `rgba(145,145,145,0.1)` |
> | **Border radius** | The [border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) for the callout. |
> 
> \* Required setting

## Rich text editor support

This component now supports the Discourse rich text editor, making callouts easier to create, edit, and organize.

### Creating callouts

You can insert callouts in multiple ways:

- Keyboard shortcut: Ctrl + Q
- Toolbar button
- Input rules:
  - `/callout<:type> `
  - `!!<type> `

- Paste support

> **Video**
>

### Editing callouts

The controls to edit a callout appear only when you select it before.

- **Type chooser**  
By clicking on the icon, a floating menu will appear.

- **Custom Title**  
Supports inline formatting and emoji

- **Folding**  
Set callouts as collapsible. It can be accessed from the options menu.

> **Video**
>

### Move controls

- **Desktop**

- **Touch devices**

> **Video**
>

### Keyboard navigation

Improves navigation inside nested callouts:

- ← at the start of the title opens the type chooser
- ↑ / ↓ inside empty areas creates/removes paragraphs
- Enter in the title moves the cursor into the body

> **Video**
>

### Click-to-insert

- Click in empty areas to create a paragraph
- Optional buttons allow inserting content inside or outside callouts

> **Video**
>

## Roadmap

Future development plans may include:

- Autocomplete types on typing

## Credits

- @StefanoCecere – Feature request, [Style blockquotes as callouts in Obsidian](https://meta.discourse.org/t/style-blockquotes-as-callouts-in-obsidian/350045)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 6, 2025, 10:30pm UTC](https://meta.discourse.org/t/quote-callouts/350962/2 "2025-02-06T22:30:35Z")

</div>

Oh nice!

I think this could be used for this purpose?:

> [@Additional Post "Colour" coding](https://meta.discourse.org/t/additional-post-colour-coding/341813):
>
> We have “Add Staff Colour” which is great … are there any other quick solutions for “colour-coding” specific Posts?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 6, 2025, 10:37pm UTC](https://meta.discourse.org/t/quote-callouts/350962/3 "2025-02-06T22:37:14Z")

</div>

![The image presents a split-screen document with two columns filled with two identical sets of placeholder text (Lorem Ipsum), each marked by a "A" symbol in green circles at their top positions. A warning message, text box, and dialog box are situated above the left text. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/1/4/e14c36165529769c756fc01215f22cc5bb6e7993.png)

That seems like a valid usage!

---

<div class="post-metadata">

### Author: ![StefanoCecere](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefanocecere/32/158064_2.png) [@StefanoCecere](https://meta.discourse.org/u/StefanoCecere)
#### Post date: [February 6, 2025, 11:29pm UTC](https://meta.discourse.org/t/quote-callouts/350962/4 "2025-02-06T23:29:27Z")

</div>

impressive! you’re great

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [February 7, 2025, 12:03am UTC](https://meta.discourse.org/t/quote-callouts/350962/5 "2025-02-07T00:03:16Z")

</div>

This is a stellar add. Much more than the base discussion seemed to entail(granted haven’t used Obsidian).

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [February 7, 2025, 8:58am UTC](https://meta.discourse.org/t/quote-callouts/350962/7 "2025-02-07T08:58:11Z")

</div>

This looks amazing. Will the callouts be styled correctly on email as well?

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [February 7, 2025, 9:13am UTC](https://meta.discourse.org/t/quote-callouts/350962/8 "2025-02-07T09:13:03Z")

</div>

When I added this component to my site I got an error message that read:

> ⚠ Your site may not work because a theme / component has errors.  
> Caused by ‘Quote Callouts’. Click here to update, reconfigure or disable.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [February 7, 2025, 9:29am UTC](https://meta.discourse.org/t/quote-callouts/350962/9 "2025-02-07T09:29:56Z")

</div>

What version of discourse are you running?

I am on Tests-passed(3.5 beta) and it seems fine

If you’re on Stable you may still be 3.4 or maybe earlier version as 3.4 just rolled out to stable

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [February 7, 2025, 9:47am UTC](https://meta.discourse.org/t/quote-callouts/350962/10 "2025-02-07T09:47:23Z")

</div>

Ah, I haven’t upgraded recently because of the [PostgreSQL stuff](https://meta.discourse.org/t/postgresql-15-update/349515). I’ll report back when I do!

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [February 7, 2025, 9:50am UTC](https://meta.discourse.org/t/quote-callouts/350962/11 "2025-02-07T09:50:30Z")

</div>

Not sure if that is the case.. But a likely suspect as many changes have rolled out with how TC etc.. structures have changed. Like the move to glimmer components.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 7, 2025, 12:54pm UTC](https://meta.discourse.org/t/quote-callouts/350962/12 "2025-02-07T12:54:29Z")

</div>

> [@alehandrof](#):
>
> This looks amazing. Will the callouts be styled correctly on email as well?

Unfortunately, I don’t think so. It would require a plugin.

> [@alehandrof](#):
>
> When I added this component to my site I got an error message that read:

What is your current Discourse version?

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [February 7, 2025, 1:35pm UTC](https://meta.discourse.org/t/quote-callouts/350962/13 "2025-02-07T13:35:48Z")

</div>

I updated to the latest version and it works now.

The lack of email support unfortunately makes this unusable for our case. Most of our members are subscribed to groupts & categories and so read messages in their email. Bummer!

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 7, 2025, 1:47pm UTC](https://meta.discourse.org/t/quote-callouts/350962/14 "2025-02-07T13:47:17Z")

</div>

I might try to make a plugin version later!

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [February 7, 2025, 2:48pm UTC](https://meta.discourse.org/t/quote-callouts/350962/15 "2025-02-07T14:48:50Z")

</div>

This is a fantastic addition to Discourse! ❤ ❤ ❤

That’s exactly what we are missing in Discourse core, at least the 4 most common types of callout such as info, danger, warning and success. We have been using the blockquote + emoji format for a while and we willl definitely give this one a shot 🙂

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [February 7, 2025, 4:46pm UTC](https://meta.discourse.org/t/quote-callouts/350962/16 "2025-02-07T16:46:13Z")

</div>

Love what you’ve done here!

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [February 8, 2025, 2:54pm UTC](https://meta.discourse.org/t/quote-callouts/350962/17 "2025-02-08T14:54:14Z")

</div>

Very nice thanks !

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [February 16, 2025, 7:13pm UTC](https://meta.discourse.org/t/quote-callouts/350962/18 "2025-02-16T19:13:07Z")

</div>

Hi, just one thing, the quote callout code appears in the excerpts on my home page, it would be better it doesn’t:

 ![The image shows the Autodesk logo along with a text in French discussing the history, evolution, definitions, and future perspectives of Autodesk software since its creation in 1982. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/d/4/c/d4c96b8f400a9695e6a8615478aea85b76806f17.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 17, 2025, 12:05am UTC](https://meta.discourse.org/t/quote-callouts/350962/19 "2025-02-17T00:05:39Z")

</div>

@patrickemin Can you test the latest version? It should clean up the topic excerpt now.

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [February 17, 2025, 1:00am UTC](https://meta.discourse.org/t/quote-callouts/350962/20 "2025-02-17T01:00:03Z")

</div>

Yes it works thanks!

---

<div class="post-metadata">

### Author: ![dubwoc](https://avatars.discourse-cdn.com/v4/letter/d/b4bc9f/32.png) [@dubwoc](https://meta.discourse.org/u/dubwoc)
#### Post date: [February 21, 2025, 2:12am UTC](https://meta.discourse.org/t/quote-callouts/350962/21 "2025-02-21T02:12:51Z")

</div>

Thank you for the theme component I really like it!

Unfortunately, I had to temporarily disable it as it was causing visual problems on my site and I saw the following in the console that I was able to trace back to your callouts.gjs

 ![bug](https://global.discourse-cdn.com/meta/original/4X/0/2/4/024cdd474d8f1843c77a3103cea2f60842605816.png)

[Next page](https://meta.discourse.org/t/quote-callouts/350962.md?page=2)