nuxt-x-affiliate
Callout Box
info / success / warning / danger / tip callout with optional title and custom icon.
Callout Box
The XAFCalloutBox component is a colored, rounded box for highlighting blocks of in-content text. Five variants cover the common editorial cases — info, success, warning, danger, tip. Accepts a slot for the body content.
Components
<XAFCalloutBox />
<XAFCalloutBox variant="warning" title="Heads up">
This product is no longer being manufactured. The refurbished units on Amazon
are a solid pick, but don't expect first-party warranty coverage.
</XAFCalloutBox>
<XAFCalloutBox variant="tip" title="Pro tip">
Pair this with the X-Axis mount for the cleanest desk setup.
</XAFCalloutBox>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'danger' | 'tip' | 'info' | Color and icon preset. |
title | string | — | Optional heading. |
icon | string | variant default | Override the leading emoji / icon. |
Slots
| Slot | Description |
|---|---|
| default | Callout body content. |
icon | Override the leading icon. |
AI Context
component: XAFCalloutBox
package: "@xenterprises/nuxt-x-affiliate"
use-when: Colored callout box (info / success / warning / danger / tip) for highlighting in-content notes.