@plugdash/callout

Only on EmDash

The block your readers stop and read.

320 words·2min read

Adds a Portable Text block type for info, warning, tip, and danger callouts. Shows up in the EmDash editor as a native block. Ships Callout.astro with default styles that look intentional - not like an afterthought. CSS custom properties for every visual value.

npm install @plugdash/callout
beta GitHub

This is the default. No configuration.

Setup

  1. Install and register

    npm install @plugdash/callout
    import callout from "@plugdash/callout"
// in emdash plugins array:
callout()

  2. Add to your layout

    import Callout from "@plugdash/callout/Callout.astro"

<Callout variant="info" title="Heads up">...</Callout>

After this, the callout block appears in your EmDash editor. Add the component to your layout once - every post that uses callouts renders them correctly.

It looks right. But it's yours to change.

Props

proptypedefaultdescription
variant "info" | "warning" | "tip" | "danger" "info" Visual tone
title string Optional heading

CSS custom properties

tokendescription
--plugdash-callout-radius Border radius
--plugdash-callout-padding Inner padding
--plugdash-callout-border-width Border thickness

Components are intentionally simple. Copy src/Callout.astro into your theme and modify freely - no upstream coupling.

Pairs well with

callouts and code blocks are the two blocks every technical writer reaches for.

tocgen

beta

Long posts deserve navigation. Your readers will find what they came for.

npm install @plugdash/tocgen
built with plugdash