callout

What it does

Registers a callout block type in the EmDash Portable Text editor. Authors pick one of four variants - info, warning, tip, danger - and optionally add a title. Ships Callout.astro for rendering in your theme.

callout is a Native plugin (it registers an editor block) - it runs unsandboxed.

Install

Register

Open astro.config.mjs at the root of your Astro project. Import the plugin at the top, then add it to the plugins array of the emdash() integration - the one that sits inside Astro's top-level integrations array:

// astro.config.mjs
import { defineConfig } from "astro/config"
import emdash from "emdash/astro"
import { calloutPlugin } from "@plugdash/callout"

export default defineConfig({
  integrations: [
    emdash({
      plugins: [calloutPlugin()],
    }),
  ],
})

Add the component

Use the component in your Portable Text renderer for blocks with _type === "callout":

import Callout from "@plugdash/callout/Callout.astro"
<Callout variant="info" title="Heads up">
  <p>Content goes here.</p>
</Callout>

Live demo

Props

prop	type	default	description
variant	"info" | "warning" | "tip" | "danger"	"info"	Visual tone
title	string		Optional heading

CSS custom properties

token	description
--plugdash-callout-radius	Border radius
--plugdash-callout-padding	Inner padding
--plugdash-callout-border-width	Border thickness

For agents

After install, open the EmDash admin editor and confirm the callout block type appears in the block menu. The plugin does not write metadata - it only registers the block type.