Prose — Kern

Prose is for rendered Bard or markdown content. It keeps rich text inside Kern's token system: headings stay near-black and bold, links use primary blue with a visible underline at rest, and code samples use the mono stack with muted surfaces.

If you copy this component into a project without Kern's CSS pipeline, install @tailwindcss/typography and add @plugin '@tailwindcss/typography'; to your Tailwind CSS entry. KernMeta cannot auto-detect this plugin dependency from the Antlers source, so the requirement is documented here instead of relying on generated dependency metadata.

Rich content

Publishing accessible content

Prose wraps Bard or markdown output so long-form content inherits Kern's typography, color, and link rules. Every body link, like this content checklist, remains visibly underlined.

What the editor should check

Use headings in order so screen-reader users can navigate by structure.
Keep link text descriptive instead of writing “click here”.
Reserve muted text for secondary information only.

Draft the content.
Preview the rendered page.
Ship after keyboard and screen-reader checks.

Good prose is interface design: it tells people what happened, what matters, and what they can do next.

Inline code such as content | markdown uses the mono stack and muted background, matching larger code samples.

composer require marcorieser/tailwind-merge-statamic
npm install @tailwindcss/typography

Element	Kern treatment
Links	Primary blue, underlined at rest, thicker on hover.
Code	JetBrains Mono with muted background.

1{{ partial:docs/previews/primitives/prose /}}

{{ partial:docs/previews/primitives/prose /}}

Props

Name	Type	Default	Description
`as`	`string`	`div`	Root HTML element
`class`	`string`		Additional classes merged via tw_merge (root element only)

Slots

Name	Fallback / Default	Description
`default`		Rich content rendered inside the prose wrapper

Source

 1{{#
 2    @name Prose
 3    @desc Rich text wrapper for Bard or markdown output, mapped to Kern typography and color tokens.
 4    @param as string [div] - Root HTML element
 5    @param class string - Additional classes merged via tw_merge (root element only)
 6    @slot default - Rich content rendered inside the prose wrapper
 7#}}
 8{{ _el = as ?? 'div' }}
 9{{ _class = 'prose {class}'
10 | tw_merge }}
11<{{ _el }} class="{{ _class }}">
12    {{ slot }}
13</{{ _el }}>

{{#
    @name Prose
    @desc Rich text wrapper for Bard or markdown output, mapped to Kern typography and color tokens.
    @param as string [div] - Root HTML element
    @param class string - Additional classes merged via tw_merge (root element only)
    @slot default - Rich content rendered inside the prose wrapper
#}}
{{ _el = as ?? 'div' }}
{{ _class = 'prose {class}'
 | tw_merge }}
<{{ _el }} class="{{ _class }}">
    {{ slot }}
</{{ _el }}>

Dependencies

Packages

1composer require marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic