ProseCallout
components/prose/Callout.vue
Left-border emphasis block — grape for emphasis, grey for neutral, leaf for positive highlights.
The layer is additive, not prescriptive.
Any consumer can override a layer component by defining a local component with the same name.
Scenarios
Grape — emphasis, values, pull quotes.
Grey — neutral Q&A and list rows.
Works with a heading plus body line.
Leaf — positive highlights and exclusions.
Blockquote semantics via the tag prop.
FlexRowLayout classes pass through to the root for list-row composition.
components/prose/Callout.vue
Usage
<ProseCallout
tone = "grape"
tag = "div"
>
Content here
</ProseCallout>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | String | 'grape' | grape, grey, or leaf |
| tag | String | 'div' | Root element, e.g. blockquote for quotes |
Slots
| Slot | Description |
|---|---|
| default | Callout content |