Prose

3 variants. Open one in isolation: use the link on each card.

FromHtmlProp

Open alone →

Block pipeline prose uses the html prop.

  1. First ordered list item
  2. Another item

TypographySample

Open alone →

Opening paragraph with emphasis and a link.

Section heading

  • First item
  • Second item

WithLayoutClasses

Open alone →

Home intro–style wrapper: prose plus outer margin and ink on the wrapper.

src/ui/0_atoms/Prose.astro
---
import '../../styles/markdown-math.css'


/** Tailwind Typography `.prose` wrapper for trusted HTML (block pipeline) or slot content. */
interface Props {
  class?: string
  /** Pre-rendered markdown HTML from `BlogBlock` prose nodes. */
  html?: string
}


const { class: className, html } = Astro.props
---


<div class:list={['prose', className]}>
  {html ? <Fragment set:html={html} /> : <slot />}
</div>